Magento – How to Adjust Product Image Size in Category Grid View

categoryimageproduct-images

On our category view in grid mode, our images got all different sizes. (see screenshot)
Images already got a max-height class to give them all the same height.
The problem of this is inside the image-file, because some images got more white space around the product than others.

We get our images from a open catalog with product images.

Beside changing the images manually, by uploading the correct format.
Is there an other way to give all our product images the same height and white space?
(So I mean that some images got more white space than others, so that they look all the same)

Screensnap

Best Answer

Magento can create images with the same dimensions. But: if image A has 20px whitespace as default and image B 2px, A is 300x200px and B is 1200x1800px there is no way to process this totally programmatically.

You can create the images with same dimensions on the fly like this in your app/design/frontend/[theme]/[name]/catalog/product/list.phtml where is defined the image:

$imageSource = $this->helper('catalog/image')
    ->init($_product, 'image')
    ->constrainOnly(true)
    ->keepAspectRatio(true)
    ->keepFrame(true)
    ->keepTransparency(true)
    ->backgroundColor(array(255,255,255))
    ->quality(75) // as option
    ->resize([imagewidth], [imageheight]); // set width and height

Go to the image-tag and set for the src-attribute <?php echo $imageSource; ?>

Hope this helps a little bit.

Related Solutions

Magento – Images have white space

In <vendor>/<theme>/etc/view.xml you should be able to adjust the settings of the image to remove the frame, like this:

<image id="category_page_grid" type="small_image">
    <width>610</width>
    <height>360</height>
    <frame>false</frame>
</image>

However, there is an open issue where setting <frame> to false returns true. See this Github issue.

There is also a fix in the Github comments:

After creating a plugin to convert the string value to an integer (which properly casts to a boolean), the image frame is not added.
public function beforeSetKeepFrame($image, $keep)
{
    if (is_string($keep)) {
        $keep = (strtolower($keep) === 'true') ? 1 : 0;
    }
    return [$keep];
}

Magento – Magento 2 – Why is product image size & dimensions changed after upload

In the end I created a new theme to override the following two files where the restriction was added:

vendor/magento/module-cms/view/adminhtml/templates/browser/content/uploader.phtml
vendor/magento/module-backend/view/adminhtml/templates/media/uploader.phtml

Within those files I hard coded the new max image sizes:

"maxWidth":3000,
"maxHeight":3000

This is the post I followed to achieve the override: https://magento.stackexchange.com/a/153968/191

Regarding the image file size I have not found a definitive answer as to why the size has more than doubled. This post had some insight however: https://stackoverflow.com/questions/14008524/why-smaller-png-image-takes-up-more-space-than-the-original-after-getting-resize

Best Answer

Related Solutions

Magento – Images have white space

Magento – Magento 2 – Why is product image size & dimensions changed after upload

Related Topic