Setting alternate category images for mobile phones

  • Posts: 192
  • Thank you received: 15
  • Hikashop Business
4 years 5 months ago #324389

-- HikaShop version -- : 4.3.0
-- Joomla version -- : 3.9.20
-- PHP version -- : 7.2.33
-- Browser(s) name and version -- : Opera

Hi,
We'd like display smaller category images for mobile platforms. We own smaller versions of the images and are looking for the best way to do this (e.g. scaling the originals or displaying alternate images). We've tried using the svg versions of the same pictures, which are cleaner, but don't seem to scale down automatically on mobile platforms. Maybe there is a setting for this.

Your advice is appreciated.

Regards,
Ian and Stu

Last edit: 4 years 5 months ago by smithshop123. Reason: still having problems with sizing svg files on mobiles

Please Log in or Create an account to join the conversation.

  • Posts: 4816
  • Thank you received: 654
  • MODERATOR
4 years 5 months ago #324415

Hello,

you can use some custom Css command in order to get or modify this.
First have a look on this tutorial to see how to add custom css command.

The other point to consider in your case, is the @media css command, have a look on this documentation , this will help you to understand how to manage responsiveness.

Then, in order to guide you, this kind of css command can do the trick :

div.container_html .unwanted_html_imag_class {
    display: none;
}
And in order to replace it by another icon, always via css :
div.container_html {
    content: url('url-link/new-img.png');
}

Hope this will help you to get what you need.
Regards

Last edit: 4 years 5 months ago by Philip.
The following user(s) said Thank You: smithshop123

Please Log in or Create an account to join the conversation.

  • Posts: 192
  • Thank you received: 15
  • Hikashop Business
4 years 5 months ago #324562

Hi,
we went down the road of using svg images. However, they don't scale well in hikashop. This isn't the fault of hika but rather because svg files don't scale in the same way as bitmap image. We did a bit of research.

The workaround is to load the svg into inkscape and scale it to the size you want. Then change the document size to be slightly larger than the image (e.g. scale to 64 pixels and set the document size to 70 pixels). Then re-save as an svg.

Kind regards,
Ian and Stu

The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

Time to create page: 0.060 seconds
Powered by Kunena Forum