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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s