Badge Image Are Pixelated

  • Posts: 89
  • Thank you received: 2
  • Hikashop Multisite
8 months 2 weeks ago #360112

-- url of the page with the problem -- : wip-ayam-fr-new-v2.cloudaccess.host
-- HikaShop version -- : 5.0.3

Hi,

I'm trying to use badge on our products and the badge are formatted png with size 50px. Please refer the configuration screenshot below. But the result are quite pixelated.



Then we try to use the format svg as the badges, but it not display on the front end. Here is the sample snippet for the product with the svg badge.
<div class="hikashop_badge_div hikashop_badge_topright_div" style="position:absolute; pointer-events: none; z-index:3; top:-10px; right:0px; margin-top:10px;"><img class="hikashop_product_badge_image" title="new-50" alt="new-50" src="/images/com_hikashop/upload/new-50.svg"></div>

Here is the link to the page : wip-ayam-fr-new-v2.cloudaccess.host/inde...oduits/produits-coco
Product with the svg badge are "CRÈME DE COCO ALLÉGÉE 200ML".

How can we solve this issue. Thanks.

Attachments:
Last edit: 8 months 2 weeks ago by alainz.

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

  • Posts: 83007
  • Thank you received: 13398
  • MODERATOR
8 months 2 weeks ago #360116

Hi,

You need to set the width of the image for the img tag for svg images.
For example:

img.hikashop_product_badge_image {
    width: 50px;
}

We'll add some code on our end to automatically set the width for SVG badges so that this CSS is not needed in the future.

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

Time to create page: 0.062 seconds
Powered by Kunena Forum