Category Archives: Magento Helper

Display all product images on the product page (view.phtml)

Posted on by
Reply

Lots of online stores nowadays are blatantly showing all the sharp and tempting images of the product on the product page. They are all there for you and the visitors to examine one after another simply by window scrolling – no gimmicks such as cloud zooming or lightbox, etc. While technical cleverness such as cloud zooming or lightbox may seem pretty, they are hardly any more usable than the plain old way of just splashing the product images by simple HTML code.

I prefer the old way which would actually engage the visitors.

However, by default Magento has only narrowly arranged thumbnails of the product images, the visitor has to click those thumbnails to see the large version – waste of user attention and they could leave because it costs more to get what they want (to see a larger picture). What we want to do is to simply display all the product images in large versions on the product page where the visitors are instantly satisfied.

Display all product images WITHOUT watermarks

To do this, find /app/design/frontend/default/your_theme/template/catalog/product/view.phtml and add this snippet anywhere appropriate (change the bold part to your own theme path):

<div class="product_images_exhibit">
	<h2><?php echo $this->__('Product Images') ?></h2>
	<?php $_images = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages(); ?>
	<?php if($_images) {?>            
		<?php foreach($_images as $_image) {?>
			<p><img src="<?php echo $this->helper('catalog/image')->init($_product, 'image', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->setWatermarkImageOpacity(0)->resize(848, null);?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php echo $this->htmlEscape($_image->getLabel());?>" /></p>
		<?php } ?>
	<?php } ?>
</div>

That’s it! See what I’ve done for my store: http://www.princessly.com/trumpet-a-line-v-neck-asym-drop-waist-sleeveless-straps-wedding-dress-w-court-train.html

Display all product images WITH watermarks

With “->setWatermarkImageOpacity(0)” the displayed images will not have watermarks on them. This is better for user experience but may enable image stealing. To add the watermarks, just get rid of “->setWatermarkImageOpacity(0)“:

<div class="product_images_exhibit">
	<h2><?php echo $this->__('Product Images') ?></h2>
	<?php $_images = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages(); ?>
	<?php if($_images) {?>            
		<?php foreach($_images as $_image) {?>
			<p><img src="<?php echo $this->helper('catalog/image')->init($_product, 'image', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(848, null);?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php echo $this->htmlEscape($_image->getLabel());?>" /></p>
		<?php } ?>
	<?php } ?>
</div>

You would still need to configure watermarks in System -> Configuration -> Design to make this work.

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.