Fitting different images as done in Ted.com

Question

How resizing and fitting different images in a fixed space as done in http://www.ted.com/talks/browse and search results jinni.com.

Any leads how this can be done, like with jQuery or with php support something.

Thanks

Answer 1

Using float:left & a fixed width & height with a clear:both on some images will do the trick.

img.big{
 float:left;
 width:100px;
 height: 100px;
}
img.small{
 float:left;
 width:50px;
 height:50px;
}
img.clear{
 clear:both;
}

Answer 2

I believe he's looking for an algorithm that will actually perform the picture layout.

You could look into Wordle, which appears to do something very similar (although it uses text, not images).

Answer 3

The way it's done on the TED website, they use Flash and only one aspect ratio for all the images, which makes the algorithm fairly trivial. For an even more stylish look (and for serious geek points), you could pick a couple of aspect ratios (one square, one portrait, one or two horizontal) and custom-build an algorithm to solve a subset of the 2D bin packing problem efficiently.

Better yet, you could use some nifty algebra to automatically decide which sizes would fit into a rectangle of a specified width and have the algorithm do all the resizing for you automatically. That may sound like NP-hard black magic, but A List Apart actually had an excellent article about it some time ago. It even has a simple explanation of the math involved and PHP code you can download and modify to your needs:

Automatic Magazine Layout -- Example 1

Answer 4

The correct term for this display is a Treemap. It may help with your algorithm search. There are several solutions available, including JavaScript and RoR.

Even if those solutions don't work for you, the proper term should help you get on track!