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

Google and Yahoo Have New Requirements for Email Senders

What ROAS Really Means

Everything You Need to Know About Updating to Google Analytics 4

Contact Us