demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Use CSS to Auto-Generate Image Thumbnails

css / galleries

Estimated reading time: 2 minutes, 36 seconds

Auto-generated image thumbnailsTalking about the concepts of CSS filters with my class yesterday, 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 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 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.