magento2: Minicart thumbnail image showing wrong size in frontend which is half of image size in XML file
After upgrading Magento version from 2.3.5-p1 to 2.4.3-p1, I am facing the problem of minicart thumbnail size. I found that in the view.xml file, the width and height of half the size set for the minicart thumbnail shows in the frontend minicart.
Note: It works fine in my old Magento version that the size which is in view.xml file shows the width and height of the size in the frontend.
Preconditions (*)
- Magento version 2.4.3-p1
Steps to reproduce (*)
Important: By the way, this is the default issue in both Blank and Luma themes.
- Create any one product and upload the thumbnail image of the product in it.
- Go to Front End and add product to cart.
- You will see thumbnail images of the product in the minicart.
- If you inspect it, the image loads the same size as it would in view.xml but in the upper HTML tag <span class="product-image-container"> takes half width and height attribute and due to that minicart design is breaking and showing small thumbnail image.
- For example, if you enter the 150x150 width and height in the view.xml file, then it will show 75x75 px inline width and height attributes in the upper <span> HTML tag.
<image id="mini*cart_product*thumbnail" type="thumbnail"> <width>75</width> <height>75</height> </image>
Expected result (*)
- Prodcut item width and height of the <span> tag should be 150px shown which is given in the view.xml file
Actual result (*)
- It is showing 75x75 px width & height in <span> tag. See above screenshots
Please provide Severity assessment for the Issue as Reporter. This information will help during Confirmation and Issue triage processes.
- < > Severity: S0 - Affects critical data or functionality and leaves users without workaround.
- < > Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
- < > Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
- < > Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
- < > Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 1
- Comments: 29 (7 by maintainers)
Commits related to this issue
- #35275: Minicart thumbnail image showing wrong size in frontend which is half of image size in XML — committed to olegpola/magento2 by deleted user 2 years ago
@csvikram44 the reason for that - retina/4k displays that becoming more and more popular everywhere both in mobile and on computers now. The 1x images looks blurry on these displays, so you have to provide 2x sized images.
@Rickertje This issue should be closed. The need to double the size in view.xml is for fixing issue #24735. If you are still confused, please read my comment above (I’ve just updated it to say the change in order to fix #24735). @engcom-Delta could you check my comment and mark this issue as closed?
Hi @csvikram44 This issue is invalid. In the changes in PR 24743 in order to fix issue #24735, @dmdanilchenko changed the
width
(andheight
) in both HTML and XML files: app/code/Magento/Catalog/view/frontend/web/template/product/image_with_borders.html app/design/frontend/Magento/blank/etc/view.xml app/design/frontend/Magento/luma/etc/view.xml You can take a look at PR’s changed files here: https://github.com/magento/magento2/pull/24743/filesYou guys had this issue because you declared width and height for
<image id="mini_cart_product_thumbnail" type="thumbnail">
in <your theme dir>/etc/view.xml. But with the new change in PR 24743, the width and height size should be double in <your theme dir>/etc/view.xml.Conclusion: The correct solution is double the size of height and width for
<image id="mini_cart_product_thumbnail" type="thumbnail">
in <your theme dir>/etc/view.xml, not changing any from app/code/Magento/Catalog/view/frontend/web/template/product/image_with_borders.html.