Category Archives: Magento Docs

Magento: Get Original Width and Height of Product Images

Posted on by
Reply

Took me a while to find this but it’s actually in the Image Helper docs: http://docs.magentocommerce.com/Mage_Catalog/Mage_Catalog_Helper_Image.html

To get the width and height of the original product image (not resized ones, but the original ones that are uploaded when creating the product):

$this->helper('catalog/image')->init($_product, 'image')->getOriginalWidth()
$this->helper('catalog/image')->init($_product, 'image')->getOriginalHeight()

This is very useful when you need to make decisions based upon the dimensions of the original product image. For example, if the uploaded product image is smaller than 500px in width, the Zoom View would shrink to the image width; if not, the Zoom View would stay at 500px in width.

Adapt Product Images to Keep Aspect Ratio without White Padding in Fixed Width

Posted on by
Reply

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.

Mage::helper -> Resize Product Images Without Watermarks

Posted on by
Reply

We usually set watermarks only for large product base images, leaving small images and thumbnail images as they are without any watermarks. This is achieved by “System -> Configuration -> Design -> Product Image Watermarks”, and just supply a watermark image to base image and leave small image as well as thumbnail image blank.

However, many of the Magento themes out there don’t quite respect the watermark rules we set and when they want to resize the product image into a smaller size such as 50×50, they simply do this:

Mage::helper('catalog/image')->init($product, 'image')->resize(50)

Notice they used ‘image’ for the second parameter of the init() method which tells Magento that this image would be resized and then served as a base image. And because it is a base image, it is stamped with the watermark we uploaded for all base images.

For an image as tiny as 50×50, it simply doesn’t look great with any watermarks on it. We have to get rid of it.

Solution is simple

Just change the second parameter to ‘small_image’:

Mage::helper('catalog/image')->init($product, 'small_image')->resize(50)

And Magento knows this resized image is meant to be a small image rather than a base image and it would not give any watermarks to it.