Properly remove white image frame upon resizing photos in Magento

Magento has pretty neat image helper you can use to output your product photos. Today one of my coworkers got frustrated with the white frame he kept getting around the resized image he tried to output in sidebar block. As s possible solution he tried resolving the issue with CSS. However, there is a better, more nicer solution to ditch the whit frame around resized images in Magento.

Here is a practical example of a code sample from default media.phtml file:

< ?php foreach ($this->getGalleryImages() as $_image): ?>
<ul>
 	<li><a title="< ?php echo $this->htmlEscape($_image->getLabel()) ?>" href="#"><img src="<?php echo $this-/>helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="< ?php echo $this->htmlEscape($_image->getLabel()) ?>" width="56" height="56" /></a></li>
</ul>
< ?php endforeach; ?>

Turning it into this will yield a “frame-free” image:

< ?php foreach ($this->getGalleryImages() as $_image): ?>
<ul>
 	<li><a title="< ?php echo $this->htmlEscape($_image->getLabel()) ?>" href="#"><img src="<?php echo $this-/>helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->keepFrame(false)->resize(56); ?>" alt="< ?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a></li>
</ul>
< ?php endforeach; ?>

As you can see, all it took was to add the keepFrame(false) method call prior to calling the resize() method.

Here are the results of before/after scenario.

Hope it helps around minor styling issues 🙂

Cheers.