Magento media duplicates images and swap when not needed

Question

I have come across a strange issue. Whereby, on the products page magento creates duplicate images for each image from the "More views" gallery.

I have located the relevant code to the file media.phtml and specifically:

<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
        <?php if ($this->isGalleryImageVisible($_image)): ?>
        <img id="image-<?php echo $i; ?>"
             class="gallery-image"
             src="<?php echo $this->getGalleryImageUrl($_image); ?>"
             data-zoom-image="<?php echo  $this->getGalleryImageUrl($_image); ?>" />
        <?php endif; ?>
    <?php $i++; endforeach; ?>

Is there a way to stop this unnecessary image duplication?

Also, the gallery doesn't take into consideration the current main image. Whereby, if image1 is the main image and you click the thumbnail of image1 it still does the swap. So, would I amend the gallery to only do the swap if not already the main image?

Digging further, I believe the following function is responsible for the changing of the image(s):

swapImage: function(targetImage) {
    targetImage = $j(targetImage);
    targetImage.addClass('gallery-image');

    ProductMediaManager.destroyZoom();

    var imageGallery = $j('.product-image-gallery');

    if(targetImage[0].complete) { //image already loaded -- swap immediately

        imageGallery.find('.gallery-image').removeClass('visible');

        //move target image to correct place, in case it's necessary
        imageGallery.append(targetImage);

        //reveal new image
        targetImage.addClass('visible');

        //wire zoom on new image
        ProductMediaManager.createZoom(targetImage);

    } else { //need to wait for image to load

        //add spinner
        imageGallery.addClass('loading');

        //move target image to correct place, in case it's necessary
        imageGallery.append(targetImage);

        //wait until image is loaded
        imagesLoaded(targetImage, function() {
            //remove spinner
            imageGallery.removeClass('loading');

            //hide old image
            imageGallery.find('.gallery-image').removeClass('visible');

            //reveal new image
            targetImage.addClass('visible');

            //wire zoom on new image
            ProductMediaManager.createZoom(targetImage);
        });

    }
}

Answer 1

The solution to the aforementioned problem is rather straightforward.

1. If not already done, then we make a copy of the media.phtml file ("Found at:{Magento_root}/app/design/frontend/rwd/default/template/catalog/product/view") in our custom theme.
2. Next, we need to amend it by removing lines 47 to 54. The block of code responsible for the duplicate images.

3. Then on the the anchor tag of the thumbnail images ("line 59/65") we need to add an id attribute like so:

   id="image-<?php echo $i; ?>"
   

4. On the same anchor tag we also now need to add two new data attributes data-main and data-zoom-mage, with each containing the gallery image url. Like so:

   data-main="<?php echo $this->getGalleryImageUrl($_image); ?>" data-zoom-image="<?php echo  $this->getGalleryImageUrl($_image); ?>"
   

5. Those are the only changes needed in the media.phtml file. Complete file should now look like:

   <?php
   $_product = $this->getProduct();
   $_helper = $this->helper('catalog/output');
   ?>
   <div class="product-image product-image-zoom">
   <div class="product-image-gallery">
       <img id="image-main"
            itemprop="image"
            class="gallery-image visible"
            src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"
            alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"
            title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" />
   
   
   </div>
   </div>
     <?php if (count($this->getGalleryImages()) > 0): ?>
     <div class="more-views">
   <h2><?php echo $this->__('More Views') ?></h2>
   <ul class="product-image-thumbs">
   <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
       <?php if ($this->isGalleryImageVisible($_image)): ?>
       <li>
           <a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" id="image-<?php echo $i; ?>" data-image-index="<?php echo $i; ?>" data-main="<?php echo $this->getGalleryImageUrl($_image); ?>" data-zoom-image="<?php echo  $this->getGalleryImageUrl($_image); ?>">
               <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
                    width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
           </a>
       </li>
       <?php endif; ?>
   <?php $i++; endforeach; ?>
   </ul>
   </div>
   <?php endif; ?>
   <?php echo $this->getChildHtml('after'); ?>
   

6. Next, in our custom theme we need to make a copy of the file app.js. ("Found at: {Magento_root/skin/frontend/rwd/default/js}").

7. In our copy of the app.js file go to line 1197, and you should see the the swapImage function.

8. We need to change the function to reflect the changes in the media.phtml file. So, remove everything within the brackets of the function. Lines 1198 to ~1241. Then declare two new variables. One containing the main image element, which by default will have the id image-main and another containing the value of the data-main attribute we defined earlier in media.phtml. From here we need to then destroy the zoom of the current main image, do the image swap and then recreate the zoom. Note, recreate the zoom once image has loaded. Finished function code will look like:

     swapImage: function(targetImage) {
     mainImage = $j("#image-main");
     targetImage = $j(targetImage).data("main");
   
     ProductMediaManager.destroyZoom();
   
   
     mainImage.src = targetImage;
   
     mainImage.attr('src', targetImage).load(function(){
     ProductMediaManager.createZoom(mainImage);
   
     });
     }
   

These steps above will simply remove the unnecessary duplication of images for image swap.