Mobile app version of vmapp.org
Login or Join
Looi9037786

: How to make user-uploaded photos all a uniform size 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

@Looi9037786

Posted in: #Photo

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?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Looi9037786

2 Comments

Sorted by latest first Latest Oldest Best

 

@Lengel546

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

10% popularity Vote Up Vote Down


 

@Marchetta884

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:


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.
Crop it automatically. (Ditto).
Refuse to accept it and insist that the user crop it.
Give the user a JS interface to select their crop - as 3 but saving them the effort of finding some image editing software.
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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme