Categories

Featured templates

Magento. Removing white image background

Chris Diaz April 29, 2013
Rating: 4.8/5. From 4 votes.
Please wait...

This tutorial is going to show you how to remove white border from Magento products images.

Magento. Removing white image background

If you are using  different detentions for your product-list images, you may face this problem:

In order to remove the white borders,

  1. On your FTP, using  the File manager from your hosting  Cpanel  or  an FTP client (FileZilla, CuteFTP etc), go to the app/design/frontend/your_theme/template/catalog/product/ folder folder (where your_theme  is the unique name of your theme) .
  2. Open the list.phtml file to edit.
  3. Search for the following code (about  line 94):
  4. <div class="grid-inner"> <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img class="pr-img" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(203); ?>" width="203" height="203" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
    
  5. Change the values of; resize(210), width="210", height="210" to the values of your image (the values themselves may differ depending on your template number). Thus, if you image is 210×164 it should look like below:
  6. <div class="grid-inner"> <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img class="pr-img" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(210); ?>" width="164" height="210" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
    
  7. Add the following to the same code
  8. constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->
    

    so the final result looks like this:

    <div class="grid-inner"> <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img class="pr-img" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(210); ?>" width="164" height="210" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a> 
    
  9. Save the changes to the file, log into your Magento admin panel , the Catalog -> Manage products  menu and  re-upload the image.
  10. Clear your Magento/browser cache and check the category page. The image should now have no white borders.

Feel free to check the detailed video tutorial below:

Magento. Removing white image background

Top Magento Themes
This entry was posted in Magento Tutorials and tagged background, images, Magento. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket