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

How it works

To arrange boxes of different sizes into a grid, while trying to maintain their order, is a bit like playing a game of Tetris – and that is exactly what my Grid-Solver does.

It starts with an empty grid and inserts the first box to the far left. For the next box, the grid is observed: We don’t want any free spaces in our grid, so the script finds places that are large enough to hold our box. These spaces are then rated based on their size and their height. We want to have our box inserted into a space that is at least as big as the box itself, but possibly no bigger and has the least height as possible, as we don’t want to build towers of boxes. These steps are repeated for every box that is inserted. A very simple version of Tetris!

Download

You can download my Grid-Solver here: grid-solver.zip

Inside this ZIP you’ll find the GridSolver PHP class as well as the gridSolve function for Javascript. There’s also a demo of how all this works together in the ZIP. Just unpack the whole ZIP, throw some JPEGs into the images/ directory and direct your browser to the demo.php. All necessary thumbnails will be created at the first page load.

Note that the Javascript function is only needed if you have a non fixed-width layout. If your layout has a fixed width, you can simply tell the GridSolver PHP class to create the grid in a certain width. In the Demo, the grid is created with a width of 24 grid units (a grid unit is 32px), to make sure the whole grid fits on a 800x600 monitor, if Javascript is disabled.

The size of grid units and the sizes for the boxes are set to values that worked nicely while testing. Try to change these values and add more different sized boxes if you want. You’ll find the box definitions in the gridsolver.php and the gridsolver.js right at the top. Don’t forget to change the box CSS-classes in the style.css accordingly.

Copyright

Modify and use this script as you want, but make sure it states somewhere that the original was developed by me (www.phoboslab.org). Also, don’t sell this script under any circumstances!