How to make user-uploaded photos all a uniform size

Question

I have a site where users upload photos taken from their digital cameras. I want the photos to appear as big as possible, almost take up the entire screen. I also want all the thumbnails, of various users, and blown up photos, to have a uniform size so the design works on my site and everything lays out properly. Is this possible, or am I going to be stuck with different sized pictures because some people 'turned the camera on it's side to take a picture and got a picture way taller than wider'. Do the pictures need to be a certain file format, certain size, etc? Please help me!

Answer 1

You can store the photos just as they're uploaded and resize them in CSS. This is really the best option for displaying full screen, because you don't know what size screen your users will have.

However, the obvious limitation is that if you change the aspect ratio the photos will look wrong. Your options for photos which are in a different aspect ratio are:

1. Add black bars to two sides to bring it into the correct ratio. This can be done with ImageMagick (libraries exist for PHP, Perl, probably Ruby and other languages) or in .Net it's a few lines with System.Drawing.
2. Crop it automatically. (Ditto).
3. Refuse to accept it and insist that the user crop it.
4. Give the user a JS interface to select their crop - as 3 but saving them the effort of finding some image editing software.
5. Do 1 but without changing the image by setting a width and height in CSS chosing by scaling with the aspect ratio constant until both dimensions are in bounds and then centring it on a black background.

In all cases, it's advisable to keep the original image around in case your layout changes.

Answer 2

IrfanView is a free desktop tool that you can use for batch resizing of images if you have a moderation process.