Michael Pick | Design & Multimedia

111. Thumbnail FIR

No, it's not a fungal infection. ;) It's Yet Another Way to Deal With Image Thumbnails In A Photo Gallery, or as I like to say, YAWDWITIAPG.

download free software 6600

I'm sure many enterprising people out there have discovered this already, but for those of you who haven't, read on.

Dealing with image thumbnails.

The general approach to building a web gallery is to have a large image on the page and a batch of thumbnails that the user can choose from when they want to view another image.

The problem is that images are not always the same orientation or dimensions. As designers we like things to be neat and tidy, and therefore all the images are ideally arranged in a little grid. Therein lies the problem - if the images are of different dimensions and orientations, how do we keep them neat and tidy?

The easy answer is to make little cropped thumbnails for every image. This takes thought, and work.

The solution that Tim and I started to use on Cloud KIng is to put each image into it's own little grid space. The image is cropped proportionally and centered in the little box. Rollover effects are added to taste.

The code for the thumbnails is really very simple.

First, the HTML:

<a class="thumbnail" href="#" style="background-image:url(path/to/image.gif)"><span>image alt tag</span></a>

and the CSS:

a.thumbnail {display:block;width:80px;height:80px;background-position:center;background-repeat:no-repeat;}
a.thumbnail span {visibility:hidden;}

The anchor tag is set to block and given a border and background color if desired, and the background position and repeat is also set in the main CSS.

The image is then added using inline style. The image alt tag, or title, is enclosed in a span tag which can be hidden for CSS-enabled users.

Here's an example from a recent project with the addition of some JavaScript to swap the images.

The code is much the same as above, with the addition of a hover state for the border of the thumbnail box.

Taking this even further, we can use the hover state to expose the thumbnail alt text that is enclosed in the thumbnail anchor span tag.

Above is a sample of the thumbnails from Cloud King, which expose the image name on hover, with a cute cloud PNG background.

Pretty simple stuff, but it proves useful for arranging thumbnails, and could easily be automated using a CMS. It's not a perfect solution, but I've found it handy in a few situations now.

Posted by Mike on May 12, 2004 08:51 AM | Permalink