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.