Breadcrumbs

Home Web Development Change product images width and height in Magento
Change product images width and height in Magento PDF Print E-mail
Written by Administrator   

To increase or decrease product images in the products page you need to edit 2 files in the Magento core files.

Go to folder:

\app\design\frontend\default\yourtemplate\template\catalog\product

Open the file:  list.phtml


Approximately around line 99 this may vary from theme to theme but the line you need to edit is:

 

<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(202,252); ?>" width="202" height="252" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>

 

Located around here:


 

<li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">

<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(202,252); ?>" width="202" height="252" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>

<div class="clear_both"><span></span></div>

 

Change the resize(202,252); ?>" width="202" height="252" to whatever height you need.  Note changing the width may cause the number of product to not display correctly. But can increase  slightly.

 

 

After this you will need to edit the style sheet file. Go to folder :

\skin\frontend\default\yourtemplate\template\css

Open file style.css

 

Find the line similar to:

 

 

.products-grid .product-image { display:block; width:212px; height:263px; margin:0; }

 

This will be  different for each theme so the best practice is to use Google Chrome's Inspect Element feature or Firefox Inspect Element with Firebug to find the css line.

 

Increase the height to match with the new resized images.

 

For a more detailed demonstration watch the below video.