1

After editing the minicart for a couple of days now i've noticed that the images are smaller versions of the images that you would see on the product pages. This means as i'm upscaling them to fit a larger container they are losing quality.

The file containing the image reference is within Magento_Catalog/web/template/product/image_with_borders.html although the image src is set like so:

data-bind="attr: {src: src, alt: alt}

I don't really know how I would go about changing the image src but I imagine there is another file somewhere where this references to but I can't find it. Any help appreciated.

1

Try this,

You can edit view.xml in the below path

app/design/{Package}/{Theme-name}/etc/view.xml

add the below code in it

<image id="mini_cart_product_image" type="image">
            <width>100</width>
            <height>100</height>
</image>

you can change the image type and width/height as per your need

type - It means what type of image should display in the respective places in the frontend.

Explanation:

  1. image – corresponds to the Base Image role
  2. small_image – corresponds to the Small Image role
  3. swatch_image – corresponds to the Swatch Image role
  4. swatch_thumb – corresponds to the Swatch Image role
  5. thumbnail – corresponds to the Thumbnail Image role

For more information Look at this

Hope this helps

  • Alright so I have added in the extra code, but how do I call the new image type as opposed to the original thumbnail that was set? – A. Fletcher Mar 18 at 14:06
  • Have you placed the above code still doesn't work for you, if any other minicart if found in your view.xml remove it. @A.Fletcher – Prathap Gunasekaran Mar 19 at 4:00
  • 1
    Yes, i've tried removing the other image id which was "mini_cart_product_thumbnail" and it has made no difference. I think the problem in my case might be because i'm juggling multiple themes so your fix may be the one just within a different file. I'll give the upvote! Cheers for the help – A. Fletcher Mar 19 at 12:11
  • Worked or not ? – Prathap Gunasekaran Mar 19 at 12:15
  • 1
    I've had to put it on hold for a moment as the website i'm working on requires attention in other places but i've read through your attached devdocs link and it all makes sense. I will update you once I can get back around to working on it. Cheers – A. Fletcher Mar 19 at 12:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.