Some Magento themes adapt uploaded product images to identical width AND height so there would be white padding horizontally or vertically. It’s not pretty sometimes and you may want to resize the product images by a certain / fixed width and then have variable / adapted height to maintain the aspect ratio of width:height dimensions so as to get rid of the white area.
To achieve this, find any resize() method calls across the templates by searching ‘->resize(‘ and you would see they are probably like this:
Mage::helper('catalog/image')->init($product, 'image')->resize(250)Which basically tells Magento to server a 250×250 version of the product image – aspect ratio kept but there would be white padding if the original image isn’t in square.
The following code resizes the image to specified dimensions: 400×250 -
Mage::helper('catalog/image')->init($product, 'image')->resize(400,250)But that would only be good if you upload images with width:height=400:250. If not, you’d end up with distorted image or with white padding depending on the other options specified.
So what would be the real solution?
The real solution to adapt to changing product image dimensions (so you can freely upload images of any dimensions) WITHOUT white padding NOR distortion, would be this:
Mage::helper('catalog/image')->init($product, 'image')
->constrainOnly(TRUE)
->keepAspectRatio(TRUE)
->keepFrame(FALSE)
->resize(300,null)And you will also get rid of any height=”" property on the <img> tag you find therein or the client browser will distort the image.
That’s it. Now all the images would be in fixed width and adapted height to respect the original aspect ratio without any white padding nor any distortion.
Make sure you call the 3 option methods before calling resize() and do keep the ‘null’ value for height in resize() parameters.
Grab the latest premium Magento theme: Avalanche to kick-start your store! Get to know it and you will definitely look no further. Use coupon code:
