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

my books

Pro CSS3 Animation, Apress, 2013

Using SVG with CSS3 and HTML5, O'Reilly, 2017

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

The New Defaults — A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy — an auto-generated #RWD image slider. 3.8K of JS, no JQuery.

Automatic Captioning of Portfolio Images with Filenames

A more elegant solution to captioning images, and one that requires less work than URL variables.

A more elegant solution to captioning images for galleries and portfolios, and one that requires considerably less work than adding a URL variable, is to create a dependency on an accurate, descriptive image filename. In essence, this is a variation on the self-made pages technique I have demonstrated before.

Of course, your gallery images should already have descriptive filenames, with hyphens in place of spaces. Assuming that you have used a GET variable that contains the image filename (I’m going to call the variable $img for the purposes of this example), it should not be a stretch to add something like the following:

  1. <?php $title = ucwords(sub_str(str_repace(“-”,“ ”,$image), 0, -4));
  2. # the sub_str assumes that the file extension is always three characters
  3. ?>

And the code for displaying the image would change to:

  1. <img src=“assets/images/<?=$image?>” title=“<?=$title?>”  alt=“<?=$title?>” />

While considerably more efficient that using GET, this method still has some disadvantages. The primary drawback is that the caption is limited to whatever the image filename is… and because filenames cannot contain commas or other punctuation, nor be longer than 255 characters, neither can the caption.

While rather more complex, a technique that avoids those disadvantages entirely is one that uses metadata from the image itself to create the caption, and that is the method we will look at next.

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.