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 other blogs

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

my projects

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. Drop in images, add a line of CSS. Done.

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

Automatic Captioning of Portfolio Images with Filenames

php / images

Estimated reading time: 1 minute

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:

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

And the code for displaying the image would change to:

<img src=“assets/images/<?=$image?>” 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.

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.