I would like to create a gallery like Google+ "Photos From Your Circles" in which the thumbnails looks like a collage.

• Thumbnails keeps the aspect ratio of the photo.
• Gallery rows are close in height (not equal but very close).
• Spacing between thumbnails is equal everywhere.
• The gallery fills in a rectangle.
• Photos are not cropped. They're just resized to fill in the space.

Please see the screenshot as example: .jpg

i would like to learn how can i use css/javascript/jquery to style gallery thumbnails like this at the client side programatically.

Thank you for answers!

I would like to create a gallery like Google+ "Photos From Your Circles" in which the thumbnails looks like a collage.

• Thumbnails keeps the aspect ratio of the photo.
• Gallery rows are close in height (not equal but very close).
• Spacing between thumbnails is equal everywhere.
• The gallery fills in a rectangle.
• Photos are not cropped. They're just resized to fill in the space.

Please see the screenshot as example: http://ansonalex./wp-content/uploads/2011/07/google-plus-gallery-large.jpg

i would like to learn how can i use css/javascript/jquery to style gallery thumbnails like this at the client side programatically.

Thank you for answers!

• javascript
• jquery
• css
• image
• gallery

3 Answers 3

You may find this write-up helpful: Building a Google Plus Inspired Image Gallery

He uses a technique that does not require sorting the images, and it's pretty simple. Basically, once you know the width W of your rows of thumbnails, keep placing thumbnails until the total width exceeds W. Let's say you exceed W by 40px. Now, crop each thumbnail in the row (via css) to remove 40 pixels total.

If, say, you want to crop 10px from an image, you can do it with something like this:

<div style="width:[cropped width]; height:[height]; margin-left:-5px; overflow:hidden;">
  <img style="width:[true width]; height:[height];" src="path/to/thumbnail.jpg" />
</div>

The overflow:hidden crops the image, and the negative margin centers it horizontally, basically.

This is classic cutting stock problem. You can solve it using branch and bound method or dynamic programming.

Generally Google has huge base of pictures thus finding proper bination of widths is easier for them.

For you I would suggest having limited set of aspect ratios (ex. 16) which creates finite number of binations (256). Every picture before conversion should be scaled or cropped to closest aspect ratio.

Keep in mind that there may be very wide pictures which need some workaround: cropped or width of them should be width of row and height variable. Also spacing needs to be solved somehow. I would join all pictures in one row and put spacings as white overlays over pictures.

I'm going to simplify what I see (e.g. the numbers I provide won't be 100%, down-to-the-pixel accurate), but it will give you one method for acplishing this.

When I look at the screenshot, what I see is a list of images that are approximately 4x3 aspect ratio (or 3x4 in reverse). This aspect ratio is at the heart of the layout. The overall rectangle that is filled can be any aspect ratio, but it should be a multiple of some widths and heights. For example, you'll see that each row contains some portrait, and some landscape photos. The overall effect, however, is that G+ can pull from a large pool of images, and therefore, can choose a bination of images that meet the needs of the individual aspect ratio (landscape or portrait aspect of the given image), as well as overall aspect ratio of the containing rectangle.

I would take images that are available in the pool, and calculate their aspect ratio (a simple width divided by height). Then group the images by their aspect ratio.

Finally, the part that's tricky about the layout is that you have to figure out which binations of aspect ratios will result in a row that is pletely full, from left to right. From the screenshot we see three such examples:

1. 1st row = 4 landscape photos
2. 2nd row = 2 landscape photos, 2 portrait photos, and 1 square photo
3. 3rd row = 3 landscape photos, 1 portrait photo, and 1 square photo

The result is that, since all thumbnails have the same height, their bined widths in these particular binations give you the desired resulting width for the layout rectangle.

So, I think solving this particular problem is basically a matter of solving 4 sub-problems:

1. Compute the aspect ratios of all photos in the available "photo pool"
2. Make a list of all binations of photos' aspect ratios that result in the desired width (to make a single row)
3. From the pool of photos available, figure out which photos you can bine into which valid binations, resulting in a single, posed row of images
4. Finally, steps 1-3 create a single row of images. In order to get the overall rectangle, you just use steps 1-3 to create as many rows of images as you like, and then stack them all on top of one another.