Product image size category grid view

Question

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)

Answer 1

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.

Answer 2

there is only one way to do that is to fix images itself and make it all the same size withe the same padding around it

Answer 3

uploading new images would be the best and safest way, although there is ways of trimming whitespace.

Here's an example with php:

https://stackoverflow.com/questions/1669683/crop-whitespace-from-image-in-php