During an upgrade from Magento CE 2.3.2 to 2.3.7, I encountered an issue where images were not displayed properly.
After discussing the issue with our front-end designer, I had a better understanding of what might be the issue. Images weren’t being resized properly, and the dark background on the mid-sized images was showing through. Thankfully, the issue was obvious. If the background would have been lighter it might have gone unnoticed prior to upgrading the live site.
Now, on to the fix. Magento 2.x image sizing is configured in the theme’s view.xml file. That file is located at ./app/design/frontend/etc/view.xml. You can read more about this on Magento’s documentation site here. Knowing this, I had a look at the custom theme’s view.xml file. At first I thought that file might have been corrupted or maybe a permissions problem, however the file hadn’t changed in over 18 months and the permissions looked good. Next I thought perhaps Magento 2.3.7 had changed the way it performs image resizing. So, I did some Googling and researching, but didn’t really find much in that regard.
I next thought that it might be a caching/file permission issue. So, I flushed the image cache, and reset the file permissions in the pub/media/catalog folder. I then ran a full resizing from the command line with bin/magento catalog:images:resize. This took some time to complete. Upon completion, I was disappointed to find out that it didn’t fix my image sizes one bit!
Being a little frustrated by now, I decided to copy the stock view.xml file from the Magento stock Blank theme into the custom theme. The Blank theme’s view.xml file is located at ./vendor/magento/theme-frontend-blank/etc/view.xml. This time, instead of flushing the image cache and waiting on images to be rebuilt, I simply navigated to ./pub/media/catalog/product and removed the cache folder entirely. I then navigated to directly to the product landing page and I was pleased to know that the product images had resized correctly.
So now, all I wanted to know was what changed in the new view.xml that I needed to incorporate in the original custom theme’s view.xml file. I pulled up WinMerge to compare the files side by side, and I meticulously copied the changes from the new view.xml file to the old one and tested the site. I finally got down to this line in the original file:
<var name="product_image_white_borders">0</var>and when I changed it to the Blank theme value of 1:
<var name="product_image_white_borders">1</var>Magento image resizing started working fine again. Don’t ask me why this is causing the problem! In any case, if you’re experiencing issues with Magento product image resizing, have a look at the latest view.xml file in the base Blank theme! I hope this post helps out someone else experiencing the same issues. As always, if you need our help with your Magento 2 CE website, please don’t hesitate to contact us. We’d be glad to assist in any way we can!
Leave a Reply