Image Clouds
As Tag Clouds become more and more common in blogging systems, one wonders why this intuitive approach hasn’t been used for other media types like images or videos (or video previews).
The idea to scale elements in their relevance of importance is not new, however it wasn’t possible to do this with images in websites so far. HTML and CSS offer no direct mechanism to position images of different sizes in a pleasing way.
To solve this problem, I developed a simple PHP script that calculates sizes of DIVs based on their importance and arranges them in a fixed-width grid, while closely maintaining their order. The grid is pre-generated by PHP with a width of 768px in order to fit on small screens, but scales with the help of JavaScript to fit in any browser window.
Here’s a demo of how this actually looks in action: Grid-Solver Demo