Get all product images on product view page separately

Question

I want to change the design product image section on view page.

Trying to fetch all three Images seprately.

 $ImageAll = $_product->getMediaGalleryImages(); 
        $mainImg = Mage::helper('catalog/image')->init($_product, 'small_image')->resize(163, 10);
        $thumbNailImg = Mage::helper('catalog/image')->init($_product, 'thumbnail')->resize(400, 400);
        $smallImg = Mage::helper('catalog/image')->init($_product, 'image')->resize(60,60);

One more thing if we change the position of above variable then the last variable is only used

But it gives me the same image in all the three images tags.

<img src="<?php echo $mainImg; ?>" alt="<?php echo $_product->getName()?>" />
<img src="<?php echo $thumbNailImg; ?>" alt="<?php echo $_product->getName()?>" />
<img src="<?php echo $smallImg; ?>" alt="<?php echo $_product->getName()?>" /> 

BUt if i use this way all works perfectly

<img src="<?php echo Mage::helper('catalog/image')->init($_product, 'image')->resize(100,160); ?>" alt="<?php echo $_product->getName()?>" />

 <img src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(200, 200); ?>" alt="<?php echo $_product->getName()?>" />
 <img src="<?php echo Mage::helper('catalog/image')->init($_product, 'thumbnail')->resize(400, 400); ?>" alt="<?php echo $_product->getName()?>" />

Can anyone help me to understand the difference between them?

Answer 1

Mage::helper('catalog/image') is a class. Think of it as a collection in Magento.

When you write

$mainImg = Mage::helper('catalog/image')->init($_product, 'small_image')->resize(163, 10);
$thumbNailImg = Mage::helper('catalog/image')->init($_product, 'thumbnail')->resize(400, 400);
$smallImg = Mage::helper('catalog/image')->init($_product, 'image')->resize(60,60);

is like writing

    $mainImg = $foo;
    $thumbNailImg = $foo;
    $smallImg = $foo;

    $foo = Mage::helper('catalog/image')->init($_product, 'small_image')->resize(163, 10)->init($_product, 'thumbnail')->resize(400, 400)->init($_product, 'image')->resize(60,60);

If you to define all three variables before echoing them you have to clone the helper.

$mainImg = clone Mage::helper('catalog/image')->init($_product, 'small_image')->resize(163, 10);
$thumbNailImg = clone Mage::helper('catalog/image')->init($_product, 'thumbnail')->resize(400, 400);
$smallImg = clone Mage::helper('catalog/image')->init($_product, 'image')->resize(60,60);

Answer 2

When a Image is uploaded to product Gallery, Magento Creates Three copy of that image :

1. Main Image - Shown in Magnifier when Click on Product Image on Detail Page

2. Small Image - Shown in Product List and Product Detail Page

3. Thumbnails - Shown in When you change from Grid to List in Product List Page

So you are fetching all three copies of single image.

You should have to do :

    foreach ($_product->getMediaGalleryImages() as $image) 
    {
        echo $image->getUrl();
    }

    Or

    <?php foreach ($_product->getMediaGalleryImages() as $image) :?>

        <img src="<?php echo Mage::helper('catalog/image')->init($_product, 'image', $image->getFile())->resize(100, 100); ?>" alt="<?php echo $_product->getName()?>" />

    <?php endforeach; ?>