{"id":9549,"date":"2013-04-29T01:33:28","date_gmt":"2013-04-29T05:33:28","guid":{"rendered":"http:\/\/info.template-help.com\/?p=9549"},"modified":"2016-02-22T08:10:45","modified_gmt":"2016-02-22T13:10:45","slug":"magento-removing-white-image-background","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/magento-removing-white-image-background.html","title":{"rendered":"Magento. Removing white image background"},"content":{"rendered":"

<\/p>\r\n

This tutorial is going to show you how to remove white border from Magento products images.<\/p>\r\n

Magento. Removing white image background<\/a><\/p>\r\n

If you are using\u00a0 different detentions for your product-list images, you may face this problem:<\/p>\r\n

\"\"<\/a><\/p>\r\n

In order to remove the white borders,<\/p>\r\n

    \r\n
  1. On your FTP, using\u00a0 the File manager from your hosting\u00a0 Cpanel\u00a0 or\u00a0 an FTP client (FileZilla, CuteFTP etc), go to the app\/design\/frontend\/your_theme\/template\/catalog\/product\/ <\/strong>folder folder (where your_theme \u00a0is the unique name of your theme) . <\/li>\r\n
  2. Open the list.phtml<\/strong> file to edit. <\/li>\r\n
  3. Search for the following code (about\u00a0 line 94): <\/li>\r\n
    \r\n<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>\r\n<\/pre>\r\n
  4. 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: <\/li>\r\n
    \r\n<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>\r\n<\/pre>\r\n
  5. Add  the following to the same code  <\/li>\r\n
    \r\nconstrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->\r\n<\/pre>\r\n
    so the final result looks like this: <\/p>\r\n
    \r\n<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> \r\n<\/pre>\r\n
  6. Save the changes to the file, log  into your Magento admin panel , the Catalog -> Manage products\u00a0 menu and\u00a0  re-upload the image.<\/li>\r\n
  7. Clear your Magento\/browser cache and  check the category page. The image should now have no white borders.<\/li>\r\n
    \"\"<\/a><\/p>\r\n<\/ol>\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n
    Magento. Removing white image background<\/a><\/p>\r\n
    <\/p>\r\n
    <\/p>\r\n
    <\/p>\r\n
    <\/p>","protected":false},"excerpt":{"rendered":"
    This tutorial is going to show you how to remove white border from Magento products images.<\/p>\n","protected":false},"author":2,"featured_media":28938,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[729],"tags":[1008,494,2407],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/9549"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=9549"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/9549\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/28938"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=9549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=9549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=9549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}