Talking about the concepts of CSS filters with my class, I realized that one could use the clip or overflow properties to automatically generate thumbnails for a web image gallery. In most gallery designs it’s important for thumbnails to be exactly the same dimension or aspect ratio, and creating each thumbnail often takes a series of steps in an image editor.

Taking full-size gallery images and clipping them to size as navigational images would eliminate those steps, lowering page creation time. It could also decrease page download time: rather than loading both the thumbnails and the full-size images, you would only have to load a single set of large images once.

To achieve this, we would load the full-size images into our gallery navigation:

<ul id="gallery-nav">
	<li>
		<a href="#">
			<img src="sunset-muriwai-beach.jpg" alt="Muriwai Beach">
		</a>
	<li>
		<a href="#">
			<img src="big-wheel.jpg" alt="Sunset behind ferris wheel">
		</a>
	<li>
		<a href="#">
			<img src=cornwall-sunset.jpg alt="Sunset In Cornwall">
		</a>
</ul>

Note that the images all have different sizes and aspect ratios, and that they lack width and height. I will add a little CSS to the gallery navigation as a whole:

ul#gallery-nav {
	list-style: none;
	margin-left: 0;
}
ul#gallery-nav li a {
	display: block;
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
}

I’ve set display: block on the a elements in order to provide them with a width and height (as an inline tag, links will not take dimensions by default). These match the dimensions we’re about to apply with clip.

ul#gallery-nav li a img {
	border: none;
	position: absolute;
	clip: rect(0px 100px 100px 0px);
	height: 200px;
}

Elements that we apply clip to must be positioned absolutely. Our clip measurements make the thumbnails square, although you could alter the aspect ratio to be whatever you wished. Note that we’re using the non-spec version of clip without commas between the values to make it work in IE. I’ve used a technique borrowed from responsive design to set the images to all the same height, without needing to specify the width.

An alternative approach, if you don’t want to use clip:

ul#gallery-nav {
	list-style: none;
	margin-left: 0;
}
ul#gallery-nav li a {
	display: block;
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	overflow: hidden;
}
ul#gallery-nav li a img {
	border: none;
}

While it’s very useful, there are a few drawbacks to this technique that should be noted:

• This approach is only really practical for galleries with a dozen images or less. Anything more and the thumbnails will probably take too long to generate (as the page is loading in every full-size image before shrinking and clipping it).
• Perhaps most importantly, there’s no aesthetic control over how individual thumbnails are cropped: the clip area always starts and stops at the same points. Essentially, this is a CSS batch processing technique for cropping images. The only way around this limitation would be to write inline style changes to any image that didn’t look quite right.

You could combine this approach with any number of PHP directory read techniques that I’ve talked about on this blog to auto-generate the entire gallery content.

Photographs by cobalt123, Ennor, and Laurence Norah, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.