Get Product Image based on its Position – Magento

Get Product Image based on its Position – Magento

You might have seen website where the product images changes when you move mouse on it. In this tutorial i’ll show you how to do it with Magento.

You need to create a small module to achieve this. We will add this function in the helper file of the module so it can be called globally anywhere using helper function.

If you are not familiar with module creation i’ll list the steps below:

Step 1: Create a file in “app/etc/modules” named “Greeting_Imagealt.xml”. The content of the file will be.

<?xml version="1.0"?>
<config>
<modules>
<Greeting_Imagealt>
<active>true</active>
<codePool>local</codePool>
</Greeting_Imagealt>
</modules>
</config>

Step 2: Create the “config.xml” file in “app/code/local/Greeting/Imagealt/etc/config.xml”. The content of the file will be as follows

<?xml version="1.0"?>
<config>
<modules>
<Greeting_Imagealt>
<version>0.1.0</version>  <!-- This is an important section to note. It is the version of the module -->
</Greeting_Imagealt>
</modules>
<global>
<helpers>
<greeting_imgalt>
<class>Greeting_Imagealt_Helper</class>
</greeting_imgalt>
</helpers>
</global>
</config>

Step 3: Create the file “Data.php” at “app/code/local/Greeting/Imagealt/Helper/Data.php”. The content of the file will be as follows

class Greeting_Imagealt_Helper_Data extends Mage_Core_Helper_Abstract
{
   public function getImg($product, $w, $h, $imgVersion='image', $file=NULL)
    {
        $url = '';
        if ($h <= 0)
        {
            $url = Mage::helper('catalog/image')
                ->init($product, $imgVersion, $file)
                ->constrainOnly(true)
                ->keepAspectRatio(true)
                ->keepFrame(false)
                //->setQuality(90)
                ->resize($w);
        }
        else
        {
            $url = Mage::helper('catalog/image')
                ->init($product, $imgVersion, $file)
                ->resize($w, $h);
        }
        return $url;
    }
    function altImage($product, $val, $w, $h, $imgVersion='small_image'){
        $product->load('media_gallery');
        $column = 'position';
        $value = $val;
        $gal = $product->getMediaGalleryImages();
        if ($gal = $product->getMediaGalleryImages())
        {
            if ($altImg = $gal->getItemByColumnValue($column, $value))
            {
                return
                '<img class="alt-img lazyOwl" src="' . $this->getImg($product, $w, $h, $imgVersion, $altImg->getFile()) . '" alt="' . $product->getName() . '" />';
                
            }
        }
        return '';
    }
}

Above function is used to call the image based on its position define in the admin. Here $val is a position number, $w is width and $h is height. By default the imgVersion given is small_image it can be chaged to Base or Thumbnail.

Step 4: Now you just need to call the image on list.phtml in template file. You can change the image on mouseover using Jquery or CSS.

To call this image use the following code:

<?php echo $this->helper('greeting_imgalt')->altImage($_product,2,210,210); ?>

Thats it, Please post your views and comments below.

Leave a Comment