Best Magento Hosting For Small e-Commerce Stores
Page Ranking Tool

Frontend image resize for custom extension In Magento

Suppose you have developed an extension in Magento for the testimonial and you want to display the Images on the frontend as well, You have uploaded the images from the admin panel and now you want to display the resize image on the frontend. In this post I am trying to describe how we can resize an image on the frontend.

Step 1. Suppose, you have an image link url and you want to resize this image. In this example, let us assume that the image link is like as

http://localhost/EWA/media/testimonial_image/author_image_1.jpg

Now, You want to resize this image. For doing this, I am going to create a directory called resized inside media/testimonial_image. So that I can save the resized image file into the newly created directory.

$actualimageUrl = "http://localhost/EWA/media/testimonial_image/author_image_1.jpg"; //my sample image path

Step 2. Now I am going to create the folder resized through the code, You can also create folder manually by navigating to the folder where is your actual images are:

<?php

if(!file_exists(".media/testimonial_image/resized"))
mkdir("./media/testimonial_image/resized",0777);

?>

Step 3. Now Fetch the actual images through the Url

<?php
$actualimageName = substr(strrchr($actualimageUrl,"/"),1);

$imageresized = Mage::getBaseDir('media').DS."testimonial_image".DS."resized".DS.$actualimageName;//Getting the images and save it to the resized folder

$dirImgpath = Mage::getBaseDir().str_replace("/",DS,strstr($actualimageUrl,'/media'));

if (!file_exists($imageResized)&&file_exists($dirImgpath)) :
$imageObj = new Varien_Image($dirImgpath);
$imageObj->constrainOnly(TRUE);
$imageObj->keepAspectRatio(TRUE);
$imageObj->keepFrame(FALSE);
$imageObj->resize(100, 100);
$imageObj->save($imageResized);
endif;

$resizeImageUrl = Mage::getBaseUrl('media')."testimonial_image/resized/".$actualimageName;
?>

Step 4. Displaying newly created resized image on the frontend.

<img src="<?php echo Mage::getBaseUrl('media')."testimonial_image/resized/".$resizeImageUrl ?>" />

Step 5. Full Code are given below:

<?php

$actualimageUrl = "http://localhost/EWA/media/testimonial_image/author_image_1.jpg"; //sample image path

if(!file_exists(".media/testimonial_image/resized"))
mkdir("./media/testimonial_image/resized",0777);

$actualimageName = substr(strrchr($actualimageUrl,"/"),1);

$imageresized = Mage::getBaseDir('media').DS."testimonial_image".DS."resized".DS.$actualimageName;//Getting the images and save it to the resized folder

$dirImgpath = Mage::getBaseDir().str_replace("/",DS,strstr($actualimageUrl,'/media'));

if (!file_exists($imageResized)&&file_exists($dirImgpath)) :
$imageObj = new Varien_Image($dirImgpath);
$imageObj->constrainOnly(TRUE);
$imageObj->keepAspectRatio(TRUE);
$imageObj->keepFrame(FALSE);
$imageObj->resize(100, 100);
$imageObj->save($imageResized);
endif;

$resizeImageUrl = Mage::getBaseUrl('media')."testimonial_image/resized/".$actualimageName;
?>

<img src="<?php echo Mage::getBaseUrl('media')."testimonial_image/resized/".$resizeImageUrl; ?>" />

If you want to read more regarding the Image resizing in Magento Check Here
Hope this will be helpful, So enjoy the Magento custom coding.

Comments
  1. Kristenhanna

    I have learnt this image resize for custom extension In Magento here. Thanks for this post. These are really helpful to implement on magento website.

  2. Leo

    I’m needing to add this to my WordPress blog. I’ve got it to show in the wgidet position I want but when I click on the links, nothing happens. I need it to resize the posts body text only.Can someone detail the upload locations for the jscript? Does it go in the javascript directory? or the plugins directory? I may not have installed it correctly.

ADD YOUR COMMENT

*