Generating thumbnail of image and using it

I would like to allow the user to upload an image and then select a thumbnail as per that image and save it.

Then when people view her profile they can see that thumbnail and when they click on the thumbnail they can view the larger image or maybe when they become friends they can view the larger image.

How will I do go about doing this?

  1. Let the user upload images

  2. Make the user select a thumbnail from one of the images.

  3. Once the user selected an image which will serve as the thumbnail, mark it (save it in a database or write it in a file…you decide). There’s no need to shrink the picture.

  4. When people view the profile, show the thumbnail. You can control the image size of a picture, that is why shrinking an image is not necessary.

  5. When people click on a thumbnail, then simply make the image larger (or remove the size control).

I think that there really IS. Why? Imagine user uploads image with good quality and its size is about 2MB (let’s say you restricted that this is max filesize). And your thumbnail is displayed, let’s say in an autocomplete ajax request. Does browser really needs to render image which size is about 2MB for this little thing? No, really…

Instead, when user gives you thumbnail dimensions, you need to crop that image and generate another one with given dimensions. You can find many open source solutions for image cropping and resizing on the internet.

Happy work :)

Here’s one of the available extensions:



Oh, yeah I forgot. I stand corrected. I’m sure our friend blue can manage to adjust the step-by-step guide. :)