The art of thumbnails

August 10, 2009 by nuno costa 24 comments

Thumbnails

Resizing images is probably the most common image manipulation action on the web, and phMagick has great support for it, including run time or on the fly thumbnail generation

The first example is for offline thumbnailing

1
2
3
    include "phMagick.php";
    $p = new phMagick('source.png','destination.png');
    $p->resize(200,150);

resize_200_150

In this example source.png will be resized to 200px wide by 150px tall and saved as destination.png.
If only one measure is specified the image will be resized proportionally to that measure

As the aspect ratio of the image is maintained the new image might not be the exact size specified, for those occasions when the exact size is needed a handy function is provided

1
2
    $p = new phMagick('source.png', 'destination.png');
    $p->resizeExactly(133,100);
 
resize_133_100
 
phMagick will try to create an image exactly 133px wide by 100px tall. Internally phMagick resizes the image to the smallest dimension (100px tall) and then crops the image from the center in a 133×100 square

On the fly or run time thumbnails

If you are a web developer I’m certain you are familiar with the DIS (Designers Indecision Syndrome), where designers in the strive for the perfect design change specs a lot, a image that now is 250px by 150px tomorrow will be 130px 100px.

If your site has 500 or more images, creating thumbnails for all of them is quite a time consuming task. phMagick has the ability to generate thumbnails at run time and is smart enough to only generate the thumbnail if it doesn’t exist

1
2
3
    $p = new phMagick();
    $imageUrl = $p->onTheFly('images/source.jpg', 150,100);
    echo '< img alt="" src="' . $imageUrl . '" />';

This example creates a thumbnail of source.jpg and returns the url in a format that can be used directly in html. The url will be “images/150_100_source.jpg” this way phMagic knows if the thumbnail already exists and won’t create a new one, it will simply return the url of the existing one.

This can be a very powerful technique as it frees you from manually or programmatically create each thumbnail that will be needed, it’s also very fast as it only creates the thumbnail once, and gives you the liberty experiment with the layout and thumbnail sizes without having any hassle

 

24 comments so far Add Your Comment

  1. by Kathy Monnot on September 30 2009 at 02:12

    I need to query mysql database to pull out pdf’s and convert them to jpeg for a link thumbnail rollover.. Can you do this???
    thanks

  2. by nuno costa on October 3 2009 at 13:47

    Hi Kathy

    Sorry for the late response, but I’ve just arrived from my holidays.

    Yes, I can do what you asked for, but it will be a paid task.

    If you are still interested please let me know

    King Regards

  3. by Barat on October 5 2009 at 09:43

    Hi Nuno, Nice job !

    I’m interrested by resizing pictures without ratio like “Cut the Image to Fit” visible here http://www.imagemagick.org/Usage/thumbnails/#cut .
    If I understand we can make it with resizeExactly() method, isn’t it ?
    I hink it’s good to put this in this page !

    Thanks !

  4. by nuno costa on October 9 2009 at 09:56

    Thanks for making that clear barat

  5. by Sreedhar on October 12 2009 at 16:04

    Hi Nuno,

    Great job!

    I am getting errors executing the onTheFly function for generating thumbnails. I have downloaded the latest version of phmagick from the site (http://www.francodacosta.com/blog/phmagick/download).

    Here is the code for generating a thumbnail image for an image.

    debug=true;

    $imageUrl = $p->onTheFly(“zebra_001.jpg”, 150,100);
    echo ”;

    echo ‘

    ', print_r($p->getLog()) , '

    ‘;
    ?>

    And this the error I am getting while executing the script.

    Fatal error: Uncaught exception ‘Exception’ with message ‘Call to undefined method : onTheFly’ in /var/www/phmagick/phmagick.php:202 Stack trace: #0 [internal function]: phmagick->__call(‘onTheFly’, Array) #1 /var/www/phmagick/test.php(11): phmagick->onTheFly(‘zebra_001.jpg’, 150, 100) #2 {main} thrown in /var/www/phmagick/phmagick.php on line 202.

    Can you please help me out.

    Regards,
    Sreedhar

  6. by nuno costa on October 12 2009 at 16:12

    Sreedhar,

    Do you have the plugins folder? Sometimes when extracting the zip file this folder is no created

  7. by Karl on October 13 2009 at 01:09

    I ran into the same Bug as Sreedhar. It worked after I changed

    $this->setSource($sourceFile);
    $this->setDestination($thumbnailFile);

    to

    $p->setSource($sourceFile);
    $p->setDestination($thumbnailFile);

    and the call to resize from

    $this->resize($width, $height, $exactDimentions);

    to

    $this->resize($p, $width, $height, $exactDimentions);

    Hope that helps.

  8. by Karl on October 13 2009 at 01:11

    Ooops, forgot to mention file and function: This can be found in resize.php in the plugin-Folder and the function is onTheFly.

  9. by nuno costa on October 13 2009 at 14:08

    Thanks Karl

    I will correct it.

    I’m just wondering why the hell didn’t I put the onTheFly() function in my test script?

    shame on me!

  10. by nuno costa on October 14 2009 at 13:14

    There is a new phMagick version, let me know if it solves your problems

  11. by Karl on October 16 2009 at 22:44

    Hi Nuno,

    The new version works for me.

    Cheers.

  12. by Neeraj on November 19 2009 at 10:44

    Hi Guys,

    Facing a strange issue. previously i was using convert function to convert tiff images to jpg so that the GD functions can apply on it.

    But now when i m trying create thumbnail: nothing happens, i mean no error nothing but thumbnail is not generated, tried png, jpg as both source and destination but nothing works.

    Please suggest something here is my code.

    convert();
    $p->resize(250,200);

    ?>

  13. by Neeraj on November 19 2009 at 10:48

    not able to post the code correctly:
    include “phmagick.php”;
    $p = new phMagick(“napster.png”,”dapster.png”);
    $p->resize(250,200);

  14. by nuno costa on November 19 2009 at 19:12

    @Neeraj,

    Please see this article, it will show you how to debug phMagick and see error messages

    http://www.francodacosta.com/blog/phmagick/examples/debugging-phmagick

    If you need help, just mail me or ask here

  15. by enrico on April 23 2010 at 17:42

    Hello Nuno,
    good job with phmagick!

    I’m writing you because i’ve run into a weird problem and i can’t find my way out (didn’t spend lot of time on it cause i’ve thought asking you could have been faster…)

    i’m running this code:

    echo "-- on the fly:";
    $p = new phmagick();
    $imageUrl = $p->onTheFly('source.jpg', 150,10);
    echo '';
    

    and getting this as result:

    -- on the fly:DB Error: connect failed
    

    any idea why?
    DB Error? Am i missing something here?

    thank you for your help (or from any help from readers)!

  16. by nuno costa on May 22 2010 at 17:18

    @enrico,

    It’s quite weird, phmagick doesn’t do any database operations

    have you try to run it in debug mode ?

  17. by Gajendra on September 16 2010 at 07:14

    Hi,

    I have an image with size 70×130. If I use $phMagick->resize(200); it simply generate the thumbnail with original size, I noticed this. but want to know internally the original file is copied or it is resized to 70×130?

    Thanks

  18. by nuno costa on November 1 2010 at 08:00

    @Gajendra,

    A new file is created and then resized, I’m not really sure about the internals as it is ImageMagick that does it maybe if you ask in the forums you can find a proper answer

  19. by Alex on December 15 2010 at 15:10

    Hi and thank you for your work!
    But I couldn’t use “onTheFly” (some errors have occurred).
    I have edited the /plugins/resize.php:
    String 98: $P->setSource($sourceFile); on $p->setSource($sourceFile);
    and
    string 102: $p->resize($p,$width, $height, $exactDimentions); on
    $p->resize($width, $height, $exactDimentions);

    And it’s working now!

  20. by jack sparrow on June 15 2011 at 23:01

    Hi there. Thanks for the library.

    If I’m creating a square thumbnail using resizeExactly, how is the resizing done? Is the length or the width of the original image cropped?

  21. by Damien Hirlimann on July 29 2011 at 17:31

    It seems that onTheFly doesn’t work for me.
    The debug doesn’t show anything.
    it seems that there is a parameter missing in the call of the function : when I display the height (in the onFly function ) it shows me the width.
    I was wondering why you call the onFly function not using $p as parameter and you use this parameter when creating the onfly function ?

    regards,

  22. by nuno costa on August 1 2011 at 20:48

    please check the docs available on this site

    when using the resizeExactly the image ratio is not respected

  23. by nuno costa on August 1 2011 at 20:50

    Wath is the php and phmagick version you are using

  24. by Pete on September 23 2011 at 01:03

    Thumbnails says it works for images and videos… I can’t find any examples on how this works with videos and what formats you support.

    Like 10 million other people I need to extract a thumbnail from uploaded videos and ffmpeg is not an option.

    BTW, we have version: ImageMagick 6.6.0-2 2010-07-13 Q16

More from francodacosta.com

© francodacosta.com - All rights reserved