How to encode product image path in magento to image blocking

Posted: August 26, 2011 in Magento, Version 1.3.*, Version 1.4.*
Tags: , , , ,

Hello All,

Below is the steps to change encoded path of image and display in listing page of magento

1) Add below funciton in Image.php project/app/Local/Mage/Catalog/Helper/Image.php
Copy the core file and place in local folder and than add the code in local file.

/*********Function added to encrypt image path**********/

public function base64_encode_image ($filename=string,$filetype=string) {
if ($filename) {

$changeFilePath = explode(‘cache’,$filename);
$changeFilePath = Mage::getBaseDir(). DS. ‘media’. DS. ‘catalog’.DS.’products’.DS.’cache’.$changeFilePath[1];

$imgbinary = fread(fopen($changeFilePath, “r”), filesize($changeFilePath));
return ‘data:image/’ . $filetype . ‘;base64,’ . base64_encode($imgbinary);

Now we will call above function in list.phtml file of project/app/design/catalog/product/list.phtml

Add below inside foreach loop

$this->helper('catalog/image')->init($_product, 'small_image')->resize(193,250);
$forFiletype = explode('.',$product_image);
$forFiletype = array_reverse($forFiletype);
$filetype = $forFiletype[0];
if(strtoupper($filetype) == 'JPG')
$filetype = 'jpeg';
$base64image = '';
$base64image = $this->helper('catalog/image')->base64_encode_image($product_image,$filetype);


And change Image tag of product same as Below:

<img src="<?php echo $this->getSkinUrl('images/spacer.png'); ?>" width="193" height="250" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" style="background:url(<?php echo $base64image;?>) no-repeat;"/>

When user save image it will save spacer image and not the original image.

I hope this post is helpful to you. If you have any question leave the comment.

Bijal Bhavsar 🙂


Leave a Reply

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

You are commenting using your 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