This tutorial is going to show you how to re-size product images on your Magento template (based on template 46246).
Magento. How to change products images dimensions
-
To re-size the New Product images on the home page
On your FTP you navigate to the \app\design\frontend\default\your_theme_number\template\catalog\product folder and open the new.phtml file to edit.
In about line 36 you will see the code:
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(270) ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></a>where 270 stands for the width and height of the images and needs to be changed.
-
To re-size the product images on category pages
On your FTP navigate to the app\design\frontend\default\your_theme_number\template\catalog\product and open the list.phtml file.
In about line 96 you will see the code:
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(242); ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>where 242 stands for the width and height of the images and needs to be changed.
-
To re-size the images of the Related Products
navigate to app\design\frontend\default\your_theme_number\template\catalog\product\list on your FTP and open related.phtml in line 43
<a href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_item->getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(90) ?>" alt="<?php echo $this->htmlEscape($_item->getName()) ?>" /></a>change 90 which stands for the width and height of the images
-
To re-size the images of the Upsell products
naviage to \app\design\frontend\default\your_theme_number\template\catalog\product\list and open upsell.phtml. In about line 48 of the file:
change 207 value to re-size the images
-
To re-size the thumbnail images on the product page
Open media.phtml located in the \app\design\frontend\default\your_theme_number\template\ecommerceteam\cloud-zoom\catalog\product\view folder in about line 100:
<img src="<?php echo $this->helper('catalog/image')->init($product, 'thumbnail', $_image->getFile())->resize(100);?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>Change 100 value to re-size the thumbnail images.
-
To re-size the large images on the product pages
In line 76 of the same file:
<img class="big" src="<?php echo $this->helper('catalog/image')->init($product, 'image')->resize(308, 308);?>" alt='' title="<?php echo $this->htmlEscape($this->getImageLabel());?>" />Change 308, 308 to re-size the images.
You can upload the images with any size because Magento scales them automatically to the specified size, but regarding time and space we recommend you to use accurate sizes.
Feel free to check the detailed video tutorial below: