Easy way to generate thumbnails with GD library on runtime

23 Jan

It is really a panic work with image when we need to make several thumbnails. We can do it directly from Photoshop or with GD library. Generally when we upload an image we make two copies. One is for thumbnail view and another for large view.

It would be an inefficient idea to make 4 or 5 copies of image. This technique is wasting of space as well as time. Let’s say if you have to change the size of the thumbs then either you have to do it manually or you have to say not possible.

What if we don’t generate any thumbnail?!! 😀

Actually it is very easy to write some line of code to resize your image runtime. To get ride of this panic situation. I just wrote a simple function. It receive file path and new size and return image object. And IMG tag can render it easily. So i can resize image in any size with it.

Lets we have a look in following information

<?php

$image_file_path = ‘img/my_image.jpg’; // File path of the image
$resize_to = ‘100’; //100 pixel

?>

Now we have to set an URL in image tag from where my server side langue pick the image file path and width. Then we have to generate the image again and return the image object. To send the image file path I like to make it base64_encode otherwise it will edit the image base URL. Now let’s see how I called the image ULR from image tag.

For CakePHP we can do it.

<?php

echo ‘<img ” src=”‘ . $html->url(‘/’) . ‘common/get_image/’ . base64_encode($image_file_path) . ‘/100/fix” />’;

?>

Here we have a controller named “Common” and from where we calling “get_image” function.

For general use. We can write is like this.

<?php

echo ‘<img ” src=”http://www.abc.com/resize_my_image.php? file=’ . base64_encode($image_file_path) . ‘&size=100& resize_flag=fix” />’;

?>

Now we have to execute the function. This function receive three parameter. First parameter is encode file path of the image. Second one is the new size of the image. If you sent third parameter in percentage or keep it blank then you have to set size like .5 for 50%, .25 or 25% or 1 for 100%. And if you keep third parameter “Fix” then you have to set size in pixel.

For cakePHP simply we have to place the function in “Common” controller.

<?php

class CommonController extends AppController {
var $name = ‘Common’;
var $uses = array(”);
var $layout =’blunk’;
var $pageTitle = ‘Process Image’;

// Resize image
function get_image( $file = NULL, $size = NULL,$resize_flag = ‘Percentage’ )
{
// Image resize code here
}
}

for simple implementation we can do following process

$image_path = $_GET[‘file’];
$size = $_GET[‘size’];
$resize_flag = $_GET[‘resize_flag’];

// Call the function from here
get_image($image_path, $size, $resize_flag )

// Declaration of the resize image function
function get_image( $file = NULL, $size = NULL,$resize_flag = ‘Percentage’ )
{
// Image resize code here
}

This is the final step of the process. New here is the source of the get_image function.

// Resize image
function get_image( $file = NULL, $size = NULL,$resize_flag = ‘Percentage’ )
{

//Set the layout to ajax
$this->layout=’ajax’;

// Decode the image path
$file = base64_decode($file);
// This sets it to a .jpg, but you can change this to png or gif
header(‘Content-type: image/jpeg’);

// Setting the resize parameters
list($width, $height) = getimagesize($file);

if( $resize_flag == ‘Percentage’)
{
$modwidth = $width * $size;
$modheight = $height * $size;
}
else
{
$modwidth = $size;
$modheight = ( $height * $size ) / $width;
}

// Resizing the Image
$tn = imagecreatetruecolor($modwidth, $modheight);
$image = imagecreatefromjpeg($file);
imagecopyresampled($tn, $image, 0, 0, 0, 0, $modwidth, $modheight, $width, $height);

// Outputting a .jpg, you can make this gif or png if you want
//notice we set the quality (third value) to 100
imagejpeg($tn, null, 100);
}//function get_image()

?>

Once you have set total process then you need not to think about resize. Just change the size from image source. Then image will resize proportionally. I got a good advantage from this function. Hope you guys will enjoy it.

Advertisements

4 Responses to “Easy way to generate thumbnails with GD library on runtime”

  1. junal January 23, 2008 at 7:58 pm #

    ya ! rubel bhai is back with a good post. please write more often. we need your writings here…..:)

  2. hasin February 9, 2008 at 5:32 pm #

    Imagick can do this this job easily. You can try that!

  3. Omi Azad April 5, 2008 at 8:35 am #

    I need an application which will take a snapshot of a site and show as thumbnail. Do you have any solution?

  4. rubel April 6, 2008 at 3:21 pm #

    Sorry, I am late to reply because I was outside of my town.

    Well, Why not you used snap.com (https://account.snap.com/login.php))

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: