CODEWITHSUNDEEP
phpimage-processingresolutionlandscape-portrait
Zar
Zar

Reputation: 6882

Dealing with different resolutions when building a gallery

I'm currently struggling with different resolutions when building my gallery-application. I've realized the problem: the photos can be in entierly different resolutions, or taken in landscape/portrait. If I force the images to a fixed resolution - they are likely to be viewed as stretched. If I don't: I can expect something like this (example of 6 different images with loose resolution, only fixed witdh): enter image description here

When I'm actually looking for something like this (6 images with same resolution): enter image description here (these two galleries are actually running the same code)

I'd appreciate any suggestions on how to make this as pain-free as possible for the viewer. Thanks!

Upvotes: 1

Views: 222

Answers (4)

Mohammed Sayed
Mohammed Sayed

Reputation: 15

The gallery thumbnails have fixed dimensions (and fixed weight/height ratio), but source images have variable dimensions (and variable weight/height ratio). Here you have these options: 1- Stretch source images to thumbnail dimensions. 2- Add empty spaces (e.g. white) to the source images. 3- Crop extra spaces from the source images. Demonstartion

Upvotes: 0

Teson
Teson

Reputation: 6736

If you care anything about the artistic minded photographer, don't crop the image.

Resize them to a max-size (either width or height) to a specific measure, 400px, and place them each in a square div.

Upvotes: 1

dvhamme
dvhamme

Reputation: 1450

If you do not want to cut anything off, but still want to have as little whitespace on the screen as possible, you need to find an optimal arrangement of the images in unaltered form. This is a very difficult (NP-complete?) problem, but you can cut some corners if you want.

Looking at the images you posted, you could display five of them relatively cleanly together like this: put two portrait ones below each other, and add three landscape ones vertically stacked beside the portraits. If you scale them so that the height of two portraits is equal to the height of three landscapes, they will look more or less the same overall size.

You can find "pretty" screen-filling stacking methods for common aspect ratios of cameras, e.g. 16:9 and 4:3, and work off that assumption.

Upvotes: 0

jondinham
jondinham

Reputation: 8499

I think you're talking about image dimensions (not resolution, which is number of pixels in 1 inch).

To get th thing you want: (1) Choose a width-height ratio that you want to show the image (2) Cut of the extra portions of images to fit the ratio above (u can use GD library for PHP)

For example: To make all portrait photos become landscape photos, cut off the top and the bottom sides. Rotating the portrait photos to become landscape is also a solution, but this won't be nice to viewers, coz they'll have to twist their necks to see the photos.

Upvotes: 0

Related Questions