On our website, we have several products where their secondary images are displaying chopped off on the bottom and right sides of the image. More specifically, the images generated by Magento are 66px square, and the parent li is 60px square. We need to make these numbers match to make the full thumbnail be shown, but I just don't know how to do it. I guess I have a few questions:

  • What is used for Magento's image generation?
  • What can be done to change how Magento generates the thumbnail images below the primary image?
  • Does anyone else have this issue?

2 Answers 2


The solution is very simple.

Just go to app/design/frontend/[your_package]/[your_theme]/template/catalog/product/view/media.phtml

and inside the gallery loop

<?php foreach ($this->getGalleryImages() as $_image): ?>

there is a method that resizes the images, and should look like this

<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>

Obviously you can change the size inside the resize method, and don't forget to also update the width and height attributes in the <img> tag


used keepFrame(false) to resize function for remove space

  <?php echo Mage::helper('catalog/image')
->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(66)->keepFrame(false); ?>

more details on



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.