I’m working on an interesting project that involves displaying a large number of photos. Every single photo is a different size. I would like to resize them the least amount possible so that they fit together in a grid, some what like the Masonry.js plugin for JQuery, or Apple’s iPhoto Journals.
Has anyone done something like this before? Any pointers on the direction I should take this? I would like to do it server-side, using Python preferably, but am really interested in figuring out the algorithm behind it.
This is a difficult problem. It boils down to deciding what constraint you care most about, and sacrificing the others. Notice for example that masonry forces everything into fixed-width columns, and iPhoto Journals are placed onto a square grid. Both sacrifice the edges of the photos for the layout of the page.
We tried a number of algorithms along these lines at Tabblo, and they all require giving up something.
HP has an algorithm called Blocked Recursive Image Composition (BRIC) that worked really well to strike a good balance.