The Google+ and Google Image Search will resize and crop the image by width to fit a specified row, greedily optimizing for the maximum number of images per row.
Interesting you bring up [1] because I used a variation of that technique in my own site [2].
You can greatly simplify things if you resize all the images on the backend to the same width, then all you have to do is crop in the frontend to the minimum height in a row.
The trade off is the distortion happens by height rather than width, so you could end up cutting off someones head in a photo-gallery.
My patchwork solution now is to approximate the cropping that would be done in the rule of 3rds with a certain offset (so we lose dead space at the top).
A better technique would be to dynamically determine where a face was in the picture, and center on that. This plugin might help but you'd be better off passing that information from the backend. [3]
Comments
I believe this is similar to the layout used for G+ photos and Flickr's new justified view. Am I right?
We adapted the script below for http://current.openphoto.me/photo/list --- curious to check this out as well.
http://www.techbits.de/2011/10/25/building-a-google-plus-ins...
It's similar but not the same.
The Google+ and Google Image Search will resize and crop the image by width to fit a specified row, greedily optimizing for the maximum number of images per row.
Interesting you bring up [1] because I used a variation of that technique in my own site [2].
You can greatly simplify things if you resize all the images on the backend to the same width, then all you have to do is crop in the frontend to the minimum height in a row.
The trade off is the distortion happens by height rather than width, so you could end up cutting off someones head in a photo-gallery.
My patchwork solution now is to approximate the cropping that would be done in the rule of 3rds with a certain offset (so we lose dead space at the top).
A better technique would be to dynamically determine where a face was in the picture, and center on that. This plugin might help but you'd be better off passing that information from the backend. [3]
[1] http://www.techbits.de/2011/10/25/building-a-google-plus-ins...
[2] http://www.picociti.com
[3] http://facedetection.jaysalvat.com/