Manipulating and displaying multiple images on one page

Hobgoblin11

Hey,

This is what I need to do, if someone could tell me if it is possible, and if so, how to code it, that would be awesome.

I have a folder full of images, and a database table, containing, among other things, a field that has the location of a specific image in that folder. The images are full size, around 500px square. What I want to do is create a web page where all these images can be displayed, but in a thumbnail form. I also want to be able to change the appearance of them, such as adding hues, or making them black and white. However, I don't want to save a version of the original image in thumbnail form with a hue though, as I want to be able to change the hue on it.

I know it is possible to get an image using php, resize it using php and manipulate it like this, and then return it to the browser, but the methods I have seen so far are only capable of returning a single image, as you have to use a header. Is there a way of doing this, but returning multiple images on one page?

Thanks very much for any help you might be able to give.

bpat1434

Sure, just make the href portion of the <img> tag point to your PHP file that sends the "image".

So for example, you have image.php which will return a single image. You define which image you want with a simple GET variable (and the ID of the image in the database), so to get image 733 you'd have: image.php?id=733

Now, in your <img> tag you'd have this: <img src="image.php?id=733" />

Now, your image.php would query the database and look get the info it needed to find the image in your directory. Then it would use the gd library (or ImageMagick if available) to manipulate the size (I've got the conversion equation if you need it) and add any filters you want.

GD is not as robust as ImageMagick; however, GD is bundled by default with PHP and ImageMagick requires an extension (MagickWand or IMagick) to work. ImageMagick offers more in the way of image editing / filtering than GD; but you may be stuck with GD.

So each call to your image.php file would produce a different image. This may actually hurt your speed as each image being called is generated dynamically. It would probably prove better if you thumbnailed each image and used static images. But you can try this method and see how it fairs for you.

Hobgoblin11

Ah ha! Fantastic, thanks a lot. Took me a little while to understand and interpret what you said, but I think I get what you mean. I'll go through later and try to implement that, but that method shows more promise than anything I've read so far!!

I'm a bit woried about speed though. The principle behind the page is to load a LOT of images. Would it be a good idea to save a thumbnail version of the image, and only apply the filter to the thumbnail, rather than resizing the full image and applying a filter?

Thanks so much for your help, I was tearing my hair out!!

bpat1434

Honestly, it'd be better to apply the filter to the thumbnail, and save that filter. That would save on server speed (as PHP wouldn't have to do anything). But since you want something dynamic, then this is kind of your only option.

The only other thing I could say is maybe use a second server that does nothing but image manipulation. Though, that would be costly...

Eventually you have to make a decision: Do you want your pages served up faster, or do you want each image to be filtered dynamically? I'm not too keen on the fancy filtering as a simple grayscale filter can give you a neat effect for roll-overs and such, and saving the image can solve many problems with speed.