- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
Magento. Removing white image background
April 29, 2013
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,
- 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) .
- Open the list.phtml file to edit.
- Search for the following code (about line 94):
- 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:
- Add the following to the same code
- Save the changes to the file, log into your Magento admin panel , the Catalog -> Manage products menu and re-upload the image.
- Clear your Magento/browser cache and check the category page. The image should now have no white borders.
<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>
<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>
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>
Feel free to check the detailed video tutorial below: