Successful online merchandise depends on various factors and even the smallest details must not be ignored, as they can directly affect the operation of your store and the sales volume.
The quality of a product image is one such factor. Most customers usually evaluate the product by its image on your site. So, if the image is not attractive or of low quality the clients will most likely prefer to look for necessary products elsewhere.
The store owners who sell products from different manufacturers often encounter incorrect image output in some of their themes for Magento ®. This is caused by the fact that product images provided by manufacturers are all of different sizes and formats which can be unsuitable for Magento ®. In such cases, the images are displayed on the white background which is the default for Magento ®, like on the image below:
This background can be removed quite easily. You need to access your server using an FTP client and then locate the folder app/design/frontend/themeХХХ/template/catalog/product/ where ХХХ is the number of the theme installed in your store. Open the file list.phtml. Find the following code in it:
<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>
In this part of code you need to replace resize(210), width=”210″, height=”210″ with the parameters of the necessary image (e.g. 210х164). Besides, you need to enter the following code:
constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->
The resulting code block must be as follows:
<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>
After all, changes are saved, go to Catalog -> Manage products menu and re-upload the image. Now, it will look like this:
If you have any suggestions or questions, please leave your comments to this article. You can also contact GoMage experts directly and we will be glad to assist you with any issues or questions you have.
