Category Archives: Magento Images

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.

Resize Watermark by Percentage of the Original Product Image

Posted on by
1

In the configurations Magento only lets you set an absolute pixel value for the dimensions (width & height) of the watermark image you upload. What if any of the product images are smaller than the specified width of the watermark? An incomplete watermark will be printed on the product image. Everything but pretty.

What we want to do is to resize the watermark image on the fly proportionately to the size of the product image. For example, the width of the watermark will always be 50% of that of the product image. This way, we wouldn’t have such issues as incomplete watermarks.

I have Cloud Zoom extension installed so all I need to edit is the /app/design/frontend/default/forest_fashion/template/magento-team/cloud-zoom/catalog/product/view/media.phtml file. Not sure which file should be edited in your case but should be close.

In media.phtml, you can get the width of the original product image by this:

$_originalWidth = $this->helper('catalog/image')->init($_product, 'image')->getOriginalWidth();

And calculate watermark width on the fly by this:

function iGetWatermarkSize($_originalWidth) {
	// My watermark is 430x90. Change following values accordingly with your own.
	$_watermarkSizeWidth = .5 * $_originalWidth;
	$_watermarkSizeHeight = $_watermarkSizeWidth * 90 / 430;
	$_watermarkSize = $_watermarkSizeWidth.'x'.$_watermarkSizeHeight;
	return $_watermarkSize;
}
$_watermarkSize = iGetWatermarkSize($_originalWidth);

And then the watermarked image URL should be:

$url = $this->helper('catalog/image')->init($_product, 'image')->setWatermarkSize($_watermarkSize)

That’s it. Now $url should contain the URL to the new image with watermark resized proportionately to the width of the original image by percentage, 50%.

 

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.