No More Square (White Background) Magento Product Images

Do you have a site with product images of varying proportions. It can be annoying when Magento gives you that white border to make your product image square. Here's how customize what color that background is: just add backgroundcolor('000', '000', '000') before the resize() method

<code>
&lt;img src="&lt;?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail',<br/> $_image->getFile())->backgroundcolor('000', '000', '000')->resize(100); ?>" ... />
</code>

Better yet, get rid of the background using keepFrame(false):

&lt;img src="&lt;?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail',<br/> $_image->getFile())->keepFrame(false)->resize(100); ?>" width="100"  ... />

Resizing after keepFrame(false) will resize the largest dimension. Don't forget to delete your image height and width attributes (if need be)!

Here's (most of) the places you'll want to change these:

catalog/product/view/media.phtml
checkout/cart/item/default.phtml
catalog/product/list.phtml

There may be a few more but I bet you can find them. Enjoy your no longer square (white background) images!

Posted on March 21, 2011

Posted by Kevin Kirchner

Comments

Thanks, I've used the hex

Submitted by Rouan on Thu, 01/26/2012 - 20:58.

Thanks, I've used the hex value to get it working. There seems to be another issue as 0xdd,0xdd,0xdd rendered black and not grey. Code snippet: ->backgroundColor(0xdc, 0xdc, 0xdc)->resize(135);