Image resample on the fly

[Mandes]

Hi Guys (and gals)

I'm have a no brain day here due to an exceptional all nighter

I need to resample images on a clients website, they upload images to the site at around 100Kb in size, I need to display these in various forms around the site as thumbnails, smaller in size both physically and bytewise, at present the code just resizes in the img tag, but this still loads the 100Kb image, and with some pages having over 500 images thats a load of time spent twiddling your thumbs.

I've got this function

function outputimage($filename,$new_width,$new_height)
{
list($width, $height) = getimagesize($filename);
$image_p = imagecreatetruecolor($new_width, $new_height);
$image = imagecreatefromjpeg($filename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
imagejpeg($image_p, null, 50);
return;
} 

where i can pass the original filename and the required height and width of the thumnail, but cant figure out (not today anyhow) how I can incorporate this into the HTML to display the new image. I could just save the image to disc as image_tn.jpg then reference the HTML to this for each image but didnt really want to do all that disc writing.

Any kicks would be good, I can goto bed after this one

[zuAnt]

Obviously, you have to create a PHP file that will generate thumbs for you. Let's call it "thumb.php". In this file you have to know somehow which thumb to generate. You can pass some id to the file (via GET) as the thumb identifier. This can be filename, for example.

Somewhere in your html source file you put something like this

<img src="/thumb.php?id=thumb1" />
<img src="/thumb.php?id=thumb2" />
<!-- etc -->

Now, this is what your thumb.php might look like:

<?php
// Here you have to convert what's get passed in $_GET['id'] into file name
// Here is example implementation
$filename = '/my/full/path/to/original/thumbnails/'.$_GET['id'].'.jpeg';

// Now we call the resizing function
// In the example I used 80x80 thumbs
outputimage($filename, 80, 80);

function outputimage($filename,$new_width,$new_height)
{
list($width, $height) = getimagesize($filename);
$image_p = imagecreatetruecolor($new_width, $new_height);
$image = imagecreatefromjpeg($filename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
header('Content-Type: image/jpeg');
imagejpeg($image_p, null, 50);
return;
} 

?>

Things to note

1) The way you convert id to full path will definitely differ in your implementation. You have to think about it.

2) Note, that I added Content-Type header to the original function

Hope this helps.

[Mandes]

zuant

Thanks for that I'd just got it working when your answer came through only difference being I ditched the function in the php file and just had straght proceedual code.

Problem now is even though the images downloaded are far smaller its still taking an awfully long time to load the page images. I think this has more to do with connection sockets than PHP code though.

Thanks again

[zuAnt]

My congrats

Yes, if you have slow connection there is little you can do about this. Probably, some optimization will help, but not much, I think.

[twenty205]

I've done a similar thing in the past, if you have allot of images per request it can take some time to resample them all.

I did something like this

if(thumbnail is on disk) {
do nothing;
} else {
resample image to thumbnail;
write to disk;
}
Serve up thumbnail;

That way the images only get resampled once, on the first request, the only gotcha is if you upload a new image with an old name, you need to delete the thumbnail.

I can dig out the code if you like?

[Mandes]

twenty205

Thanks for that I am considering doing something like that, but the overhead is quite large, this site is for a group of estate agents, about 50 in total so it contains many thousand properties each having about 20 images on average, they have a choice as to which of the 20 images can be used as the default image for the property in question. I cannot thumbnail all images as that would just be a waste, so my options are to thumbnail on the fly the image requested by the script, which was the bit I was trying today, OR, search a thumbnail directory for the image and if not available run the script and save the image for future use. However some agencys like to rotate the default image periodically so that would mean having to search out the existing image delete it and redo it. I guess the other option is to just save all erquested images and then clear these out once in a while knowing that the first person to reenter the backoffice system after a clear out will have to wait for the images to be recategorized. All images are uploaded with a unique name so overwriting isnt an issue.

This problem only exists on the back office system as the website only serves a max of 100 properties at a time to the public which it handles reasonably fast, but some of the agencies can have upwards of 500 properties on the system and when viewing their properties this is where the problem hits. I could paginate the display, but the client prefers to be able to scroll through all properties esp when scanning with a client beside him.

Its a classic case of an idea taking off better than anticipated, my design brief when I designed the site 3 years ago was that it should handle 10 agencies !!! And whilst I put no limits on the number of agencies that could be added the throughput is starting to slow the system in places, hence the revisit now.

[twenty205]

so my options are to thumbnail on the fly the image requested by the script,

That would be the way I'd go, but also saving the thumbnails to disk on their first request.

I'll post the script tomorrow, you can use it if you like it.

Good luck with it

[SimplyFu]

you might want to consider imageMagick, and call by using exec command. try to use convert -resize command.