Home » Magento

Magento: Resize Image

23 November 2009 1,621 views 6 Comments

You can resize image with fixed height and variable width. Or, you can resize with fixed width and variable height. Following code shows how you do it in Magento.

Fixed width of 600px

<?php echo $this->helper('catalog/image')->init($_product, 'image')
->constrainOnly(TRUE)
->keepAspectRatio(TRUE)
->keepFrame(FALSE)
->resize(600,null)
?>

Fixed height of 600px

<?php echo $this->helper('catalog/image')->init($_product, 'image')
->constrainOnly(TRUE)
->keepAspectRatio(TRUE)
->keepFrame(FALSE)
->resize(null,600)
?>

The following code will resize image proportionally and not let the image be greater than height and width specified.

<?php echo $this->helper('catalog/image')->init($_product, 'image')
->constrainOnly(TRUE)
->keepAspectRatio(TRUE)
->keepFrame(FALSE)
->resize(400,400)
?>

Description of the functions used above:-

constrainOnly(bool $flag)
Guarantee, that image picture will not be bigger, than it was. Applicable before calling resize() It is false by default

keepAspectRatio(bool $flag)
Guarantee, that image picture width/height will not be distorted. Applicable before calling resize() It is true by default.

keepFrame(bool $flag)
Guarantee, that image will have dimensions, set in $width/$height. Applicable before calling resize() Not applicable, if keepAspectRatio(false).

You can resize image with Varien_Image class as well. This is most suitable when you are resizing image that is not related with catalog product.

// actual path of image
$imageUrl = Mage::getBaseDir('media').DS."myimage".DS.$post->getThumbnail();

// path of the resized image to be saved
// here, the resized image is saved in media/resized folder
$imageResized = Mage::getBaseDir('media').DS."myimage".DS."resized".DS.$post->getThumbnail();

// resize image only if the image file exists and the resized image file doesn't exist
// the image is resized proportionally with the width/height 135px
if (!file_exists($imageResized)&&file_exists($_imageUrl)) :
	$imageObj = new Varien_Image($_imageUrl);
	$imageObj->constrainOnly(TRUE);
	$imageObj->keepAspectRatio(TRUE);
	$imageObj->keepFrame(FALSE);
	$imageObj->resize(135, 135);
	$imageObj->save($imageResized);
endif;

You can use the resized image now as:

<img src="<?php echo Mage::getBaseUrl('media')."myimage/resized/".$post->getThumbnail() ?>" />

Another Scenario

Suppose, you have an image link. Now, you want to resize it. The image might be from any place. In this example, I am supposing the image link to be like http://localhost/magento/media/catalog/category/test_image.jpg

Now, I have to resize it. To do so, I will create a directory called resized inside media/catalog/category. And, I will save the resized file into the newly created resized directory.


// my sample image

$imageUrl = "http://localhost/magento/media/catalog/category/test_image.jpg";

// create folder
 if(!file_exists("./media/catalog/category/resized"))     mkdir("./media/catalog/category/resized",0777);

 // get image name
 $imageName = substr(strrchr($imageUrl,"/"),1);

 // resized image path (media/catalog/category/resized/IMAGE_NAME)
 $imageResized = Mage::getBaseDir('media').DS."catalog".DS."category".DS."resized".DS.$imageName;

 // changing image url into direct path
 $dirImg = Mage::getBaseDir().str_replace("/",DS,strstr($imageUrl,'/media'));

 // if resized image doesn't exist, save the resized image to the resized directory
 if (!file_exists($imageResized)&&file_exists($dirImg)) :
 $imageObj = new Varien_Image($dirImg);
 $imageObj->constrainOnly(TRUE);
 $imageObj->keepAspectRatio(TRUE);
 $imageObj->keepFrame(FALSE);
 $imageObj->resize(120, 120);
 $imageObj->save($imageResized);
 endif;

 $newImageUrl = Mage::getBaseUrl('media')."catalog/category/resized/".$imageName;

Displaying newly created resized image.

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

You can check other function for Varien_Image at

http://docs.magentocommerce.com/Varien/elementindex_Varien_Image.html

Popularity: 74%

Related posts:

  1. Magento: Custom function to resize image proportionally
  2. Magento: Get width height of image using Varien_Image class
  3. Magento: Get height and width of Image
  4. Magento: Get sub categories and product count
  5. Magento: Get category name and url from product
Share/Bookmark
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
Loading ... Loading ...

6 Comments »

  • Jacek said:

    This works well if you resize =< max. image space or switch off the zoom script, but have problem keeping an image center in the image space.

  • admin said:

    You can align the image at center from phtml file (template/catalog/product/media.phtml).

  • george said:

    Hello could you please tell me in wich file i have to put the code you gave above

  • Mukesh said:

    @george: you can keep it in any phtml or php file from where you want to display the resized image.

  • Vrnet said:

    Hi – this post is a great help, thanks Mukesh !
    As you guess, I’m here with a problem :)

    I’ve taken your second snippet to resize any image on the fly for displaying (without saving it) on custom modules. The source image is located at the root of the /media directory and when I print_r($imageObj) for testing, the object seems to be correct (resising is set to 120,119) :


    ...[_fileName:protected] => /vol/home/cotenat/www/media/image.jpg [_fileMimeType:protected] => image/jpeg [_fileSrcName:protected] => image.jpg [_fileSrcPath:protected] => /vol/home/cotenat/www/media [_imageHandler:protected] => Resource id #408 [_imageSrcWidth:protected] => 120 [_imageSrcHeight:protected] => 119 ...

    But I am stuck when it comes to displaying the image.

    As stated in the Varien_Image class, I’ve tried <img src="display() ;?>"/> but it returns those strange characters like “�x@9�?

  • Vrnet said:

    Sorry for double posting bu I guess the rest of my message has been truncated becasue of the use of strange keys. So, to end it : I would be so grateful if you could give me a clue on how to render the image correctly rather than with E.T. characters :)

    Thanks again !
    Hervé

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.