Home » Magento23 November 2009

Magento: Resize Image

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

Fixed height of 600px

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

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.

You can use the resized image now as:

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.

Displaying newly created resized image.

You can check other function for Varien_Image at
http://docs.magentocommerce.com/Varien/elementindex_Varien_Image.html

Hope this helps. Thanks.

Magento

Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed
  • Jacek

    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

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

  • george

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

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

  • Vrnet

    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

    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é

  • I am a newbie. My homepage is a 3 column layout. I want to resize the homepage product image so it does not overlap the right column. I am not a programmer. Where can I resize it?

    Pls help.

    Regards
    Stephanie

  • jazkat

    Thanks Mukesh!!!
    you saved my day!!

  • Ryodin

    Thank you for this, es muy helpful!

  • Krishna

    hello guys i need to know how we can resize category image in front-end of magento 1.4.0.1
    if any one knows plz tell me

  • min

    I love you! Your last example worked beautifully to resize my categories into thumbnail size for my grid! Thank you much.

  • min

    Oops, meant to mention that in that last example, to display, I had to change it to just say:
    <img src="" />
    The display code you have above gave an error, but when I looked at the source, I saw that it was just because it was trying to echo the path twice. Thanks again. You saved me a lot of time and frustration.

  • Hi,

    I am getting one error when using this custom image resize in my custom module. I am I need to call the reference but not sure how to do that in magento.

    Fatal error: Call to a member function getThumbnail() on a non-object in C:\Inetpub\vhosts\domain.com\subdomains\demo\httpdocs\app\design\frontend\default\default\template\module\module_details.phtml on line 117

    // actual path of image
    $imageUrl = Mage::getBaseDir(‘media’).DS.”module”.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.”module”.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;

    How to set the reference in magento ?

    Sorry I am asp.net programmer :)

  • Hi,

    the code // my sample image

    is creating the resized folder for me but is not saving the image. Can you help ?

  • I got this working, thanks for the code.

  • New Problem.

    How I can use this image resize function in a loop ?

    I am getting this error – Warning: getimagesize(C:\Inetpub\vhosts\domain.com\subdomains\demo\httpdocs) [function.getimagesize]: failed to open stream: Permission denied in C:\Inetpub\vhosts\domain.com\subdomains\demo\httpdocs\lib\Varien\Image\Adapter\Abstract.php on line 84

    I have all the necessary permissions.

    Any idea ?

  • Chuck

    I am fairly new to Magento after suffering thru osCommerce hell for several years.

    So far Magento is everything I want in a CMS system and more. My ONLY complaint is when it decides to resize all my carefully crafted images to some mysterious sizing dimension buried deep in the code somewhere in Magento’s backend.

    How do I prevent his from happening or at least define the parameters to where the images are resized to my standards (usually 600×600)?

  • Hello Mukesh,
    I want to increst size of image uploaded,not image resizing.My requirement to upload 500X500 images so i want to disable to image resizing.Is it possible in magento on some way to do it ,i am serching too long but sill not get any solution yet…..

    Please Help Me

  • trish

    Dude, I love you!
    Thanks, this is perfect! =)

  • Jeff

    Fantastic code snippet thanks! Really helped me out when developing a magento theme from scratch for the first time!

    + Bookmarked

  • Rohit Avasthi

    Hi,

    I used this code to resize a image in 2 size image. One is of 300 X 300 and other is of size 720 X 990. But both the images are created of size 300 X 300.

    I tired all cleared cache, changed browser, etc. but no success.

    Did you know why this happens.

    Thank you.

  • Great article!
    Just found out that you can add ->setWatermarkSize(‘125×125’) as well :)

  • Sunilpatil

    I used your above code but it add background color “black” to png images.

    Any idea for keep it transparent.

    thanks

  • George Franks

    Very useful code. I needed my images to shrink only and couldn’t find the answer anywhere else!

  • George Franks

    Very useful code. I needed my images to shrink only and couldn’t find the answer anywhere else!

  • PhilB

    When i add code such as…
    ->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(TRUE)->resize(265,265)
    to media.phtml in 1.5.1.0 the image zoom disappears.
    Anyone know how to fix this?

  • Well done! This was a huge help to me. (more clear than the magento docs, imo)

  • Suman Jis

    solution worked for me

  • Ravi

    If i wants rectangle image then what i need to do ? like if i use 400*300 it takes minimum size like 300.. image is appear 300*300.

    let me know if is there any option for rectangle image also..

  • Ani4911

    hi your code works good but i want image background transparent.
    Do u have any idea for it.

  • Bogdan

    Use $imageObj->keepTransparency(TRUE);

  • Jagesh

    Its not working for small images.i tried to resize 150×150 to 300X300.but its not resizing into 300×300.How to resize small image into big one.Please advice

  • Si

    Your a legend!

  • Mike

    Exactly what I needed. Thank you!

  • Lucien

    I’m using Store Manager’s for Magento “resize rule” which allows you to resize all Images you would like to Import.

  • vishal

    I used your above code but it add background color “black” to png images.

    Any idea for keep it as it is.
    it have used this $imageObj->keepTransparency(TRUE); but it is not working for me.

    Thanks

  • Buddy any idea how to remove the image thumbnail from magento product page . i am using sns korion theme

  • Yngve Høiseth

    Use $imageObj->backgroundColor();

    To get a white background: $imageObj->backgroundColor(array(255, 255, 255));