Monday , December 11 2017
Home >> All tutorial >> Change Image Sizes in Magento Product List or Grid View

Change Image Sizes in Magento Product List or Grid View

Magento product listing and grid listing has a fixed product image, which is not changeable from the backend. You will need to edit the phtml file to get it to your required size. Here is how to do it.

Step 1:

To change image sizes in Product List or Grid Views go to:

app/design/frontend/template/catalog/product/list.phtml
and edit the

following in list.phtml:

  1. <ul class=“products-grid”>
  2. <?php endif ?>
  3. <li 
  4. class=item<?php if(($i1)%$_columnCount==0): ?> first<?php 
  5. elseif($i%$_columnCount==0): ?> last<?php endif; ?>“>
  6. <a href=“<?php echo
  7. $_product->getProductUrl() ?>” title=”<?php echo
  8. $this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true) ?> 
  9. class=“product-image”><img src=“<?php echo
  10. $this->helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(135); 
  11. ?>” width=”135” height=”135” alt=”<?php echo
  12. $this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true) ?> 
  13. /></a>
Instead of image size 135×135, lets resize it to 240×305 pixels:
  1. <ul class=“products-grid”>
  2. <?php endif ?>
  3. <li class=”item<?php 
  4. if(($i1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> 
  5. last<?php endif; ?>“>
  6. <a href=”<?php echo $_product->getProductUrl() ?>
  7. title=”<?php echo $this->stripTags($this->getImageLabel($_product, 
  8. ‘small_image’), null, true) ?>” class=”product-image”><img src=”<?php echo
  9. $this->helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(240,305); 
  10. ?>” width=”240″ height=”305″ alt=”<?php echo
  11. $this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true) ?>” 
  12. /></a>
Same thing with product list view:
  1. <ol class=“products-list” id=“products-list”>
  2. <?php foreach
  3. ($_productCollection as $_product): ?>
  4. <li class=”item<?php if( ++$_iterator
  5. == sizeof($_productCollection) ): ?> last<?php endif; ?>“>
  6. <?php // Product 
  7. Image ?>
  8. <a href=”<?php echo $_product->getProductUrl() ?>” title=”<?php echo
  9. $this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true) ?>” 
  10. class=”product-image”><img src=”<?php echo
  11. $this->helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(135); 
  12. ?>” width=”135″ height=”135″ alt=”<?php echo
  13. $this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true) ?>” 
  14. /></a>
Lets resize to 240×305 px:
  1. <ol class=“products-list” id=“products-list”>
  2. <?php foreach
  3. ($_productCollection as $_product): ?>
  4. <li class=”item<?php if( ++$_iterator
  5. == sizeof($_productCollection) ): ?> last<?php endif; ?>“>
  6. <?php // Product 
  7. Image ?>
  8. <a href=”<?php echo $_product->getProductUrl() ?>” title=”<?php echo
  9. $this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true) ?>” 
  10. class=”product-image”><img src=”<?php echo
  11. $this->helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(240,305); 
  12. ?>” width=”240″ height=”305″ alt=”<?php echo
  13. $this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true) ?>” 
  14. /></a>

Step 2:

Go to /skin/frontend/yourtemplate/css/styles.css and change the respective css variables.

We also contribute great content of Magento Download for FREE (all versions)

DON'T MISS THE CHANCE!

magento download

About Champ

Leave a Reply

Your email address will not be published. Required fields are marked *

Heap | Mobile and Web Analytics