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

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

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

<img src="<?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!

Share it


Related Posts

Affordable Uniforms

Five Things You Should Know About eCommerce Fraud

4 Ingredients for Creating Product Descriptions that Sell

Satisfying a Niche: The Ins and Outs of Unique Markets

Contact Us