PHOBOSLAB

Blog Home

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!

Tuesday, November 13th 2007
— Dominic Szablewski, @phoboslab

12 Comments:

#1Киселев Евгений – Friday, November 16th 2007, 17:04

Looks nice. Would be great to have popup window in your demo to view images (nice collection btw.)

If you'r interested, you can check my project, I developed. It's about image clouds too: phpimagecloud.sourceforge.net

#2Crawler – Monday, March 3rd 2008, 17:35

Since your email isn't working and I'd really like to try your script I try to contact you this way: I downloaded your grid-solver demo, but I couldn’t get it working. I copied all the files in the archive on my webserver and then stored some JPG-files in the images-folder. But when I want to open the script, I get an error message. Could you perhaps take a look at it and tell me what to do? The images-folder and all the folders inside are chmoded 777, the demo.php (I renamed it to index.php) is chmoded 755. You can find my test-page at pics.digination.de

#3Dominic – Monday, March 3rd 2008, 22:32

This class requires PHP5. Sorry for not mentioning this earlier.

#4 – Kioto – Sunday, August 10th 2008, 21:35

Hi,

i like this script. Is it possible, to show gif files and jpg files at the same time? ATM, i can only display jpg files. But now, i want to display more formats (if possible..)

Ty.

#5Dominic – Sunday, August 10th 2008, 23:07

The image loading with glob() and the createThumb() function is just an example of how to use the GridSolver class. It was in no way intended to be a finished application, ready for production use.

You can edit the createthumb.php to allow IMAGETYPE_GIF and add a switch to load the image with ImageCreateFromJPEG or ImageCreateFromGIF depending on its type. But that's really the stuff you have to figure out yourself...

#6 – Kioto – Thursday, August 28th 2008, 16:08

Is it allowed to sell my own script, if it use your script, too? I mean, that i have written a script, which i want to sell. This script includes also your script. You said: Also, don't sell this script under any circumstances!

But is a programmer now unable to sell his script, if this include your tool?

#7Dominic – Tuesday, September 2nd 2008, 20:02

Technically, yes. You can't sell the GridSolver. Neither stand alone, nor as a part of any other software. It's not licensed under the GPL or any likewise software license which would allow this.

Please contact me via mail with the details of your project and I'm sure we can work something out.

#8MOin – Monday, September 8th 2008, 20:29

thats really new for me, and also it looks so amazing. i might use this for my upcoming image blog. thanks a lot

#9 – Miamia – Wednesday, July 1st 2009, 12:45

wow, amazing work.
I really love that art pictures

#10Tschai – Saturday, December 12th 2009, 21:27

The script works simply fan-tas-tic...although I've got no idea yet how to use is.

Thanks...

#11 – fque1337 – Thursday, August 23rd 2012, 23:23

Warning: Invalid argument supplied for foreach() in /users/fque1337/www/demo.php on line 16
what do i false?
The skript looks very nice . Nice Job.

#12 – headShrinker – Thursday, August 22nd 2013, 03:36

This is beautiful! I have the demo up and running. Going through the code now. Thank you so much! Can't wait to get my gallery situated with this code.

Post a Comment:

Comment: (Required)

(use <code> tags for preformatted text; URLs are recognized automatically)

Name: (Required)

Please type phoboslab into the following input field or enable Javascript. This is an anti-spam measure. Sorry for the inconvenience.