gb
  • gb
  • gb
  • gb
  • gb
  • gb
  • gb
  • gb
  • gb
  • gb
  • gb
-->

Display large extra images Magento

Stock in the Channel often has multiple images for products and we export image URL links for thumbs and main images when possible.  Thumbs for the extra images will often be displayed below the main image as see in this example

By default Magento doesn’t expect an image link and templates are usually designed expecting the images to be stored locally on your server


For this reason, when you click on one of the extra image thumbnails these are often then opened in a separate window or indeed displayed in the same image frame and can end up being displayed very small still.

Looks fairly awful!!

Fortunately, in most instances a simple fix exists to change this so that when we click on the thumb image it actually loads the corresponding main image.

Here’s what you need to do

Using an FTP applications such as Filezilla,

Locate:httpdocs/app/design/frontend/default/template/catalog/product/view/media.phtml in the themes frontend folder.

Find the following line of code and replace the red highlighted text as per the second extract below

 <a rel="group" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(600, 600); ?><?php // echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" ><img src=”<?php echo $this->helper(‘catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(56, 56); ?>” alt=”<?php echo $this->htmlEscape($this->getImageLabel($_product, ‘small_image’)) ?>”/></a>

Change to:

 <a rel="group" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getUrl())->resize(600, 600); ?><?php // echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" ><img src=”<?php echo $this->helper(‘catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(56, 56); ?>” alt=”<?php echo $this->htmlEscape($this->getImageLabel($_product, ‘small_image’)) ?>”/>
</a>Save the edited file back to your install directory and refresh the page on your Magento store front-end to see the changes.

Let us know if we missed anything...

Leave a Comment

You must be logged in to post a comment.