Human beings don’t fare well with monotonous, repetitive labor, but computers love it. When faced with coding predictable, sequential markup like a series of image captions, developers spare themselves time, boredom and frustration by automating the process as much as possible. This automated solution should provide adaptive breakpoints: if a procedure fails, the result should still look good, at whatever level of support has been achieved to that point.

While it takes a more effort at the start, this creates code this is more powerful, consistent and flexible: in the example above, we could add or remove images from the markup and the gallery would instantly adapt to the changes, automatically creating new captions.

Step One: Create The Default Accessibility Layer

We start by assuming that users won’t be able to see the images at all. Therefore, the gallery content needs full descriptive alt attributes:

<div id="autocaption">
	<img src="north-falls-silver-falls.jpg" alt="Photograph of North Falls, Silver Falls State Park">
	<img src="shepperds-dell-columbia-gorge.jpg" alt="Photograph of Shepperds Dell, Columbia Gorge">
	<img src="upper-butte-creek-falls.jpg" alt="Photograph of Upper Butte Creek Falls">
</div>

The images themselves could be added to the page by hand, or brought in by PHP or via a CMS. At this level, the markup is “raw”: no CSS, no JavaScript. The majority of visitors can see the result, but it won’t be presented very well. Let’s improve on that:

Step Two: Add Base CSS

At this level, we’ll be crafting presentation rules for what we currently have in the markup, with an eye on the possibilities added in step three. For now, let’s make the images look better:

div#autocaption > * {
	margin: 0; padding: 0;
	width: 27%;
	border: 7px solid white;
	margin: 10px; background: #fff;
	display: inline-block;
	box-shadow: 0 10px 8px -6px rgba(0,0,0,0.2);
}

Note the selector combinator used in the first line: it restricts the style rules to elements that are the immediate children of the <div>. Right now, those children are images; but if the browser allows us to run JavaScript, we’ll improve on that.

Step Three: Add Auto-Generated Captions

We want each image to have a caption underneath it. The obvious HTML5 markup to use would be <figcaption>, meaning that every image will also need to be in a <figure>. The content of the <figcaption> will be provided by using the value of the image’s own alt attribute. We’ll generate this by adding a little JavaScript at the end of the page:

var images= document.querySelectorAll( "#autocaption img" ),
L = images.length, fig = document.createElement('figure'),
who, temp
while(L) {
	temp = fig.cloneNode(false);
	who = images[--L];
	caption = who.getAttribute("alt");
	who.parentNode.insertBefore(temp, who);
	content = document.createElement( 'figcaption' );
	content.innerHTML = caption;
	temp.appendChild(who);
	temp.appendChild(content);
}

Rather than explaining every last bit of code, which will be the subject of articles to come, I’ll concentrate on the results. If you use Inspect Element in your browser’s Development Tools, you’ll see that the DOM now looks like this:

<div id="autocaption">
	<figure>
		<img src="north-falls-silver-falls.jpg" alt="Photograph of North Falls, Silver Falls State Park">
		<figcaption> Photograph of North Falls, Silver Falls State Park 		</figcaption>
	</figure>
	<figure>
		<img src="shepperds-dell-columbia-gorge.jpg" alt="Photograph of Shepperds Dell, Columbia Gorge">
		<figcaption> Photograph of Shepperds Dell, Columbia Gorge</figcaption>
	</figure>
	<figure>
		<img src="upper-butte-creek-falls.jpg" alt="Photograph of Upper Butte Creek Falls">
		<figcaption> Photograph of Upper Butte Creek Falls </figcaption>
	</figure>
</div>

The CSS rule above now affects <figure> elements rather than the images, since the <figure> elements have now become the immediate child of the <div>.

Let’s improve the presentation of the images and <figcaption>:

div#autocaption figure img {
	width: 100%; height: auto;
	}
div#autocaption figcaption {
	padding: 5px;
}

These rules will only be applied if the JavaScript works and the image is surrounded by a <figure> element and followed by a <figcaption>, making both our JavaScript and CSS progressive.

Step Four: Clean Up The Caption Text

In this case, the words “Photograph of a…” in each <figcaption> are redundant, while they remain entirely relevant in the context of alt. A quick and dirty way of cleaning up the captions would be to remove the first fifteen characters:

alt = alt.substring(15);

To ensure that the first letter of whatever remains is always capitalized, change the CSS:

div#autocaption figcaption:first-letter {
	text-transform: uppercase;
}

Alternatively, if the alt and <figcaption> content were completely different, you could place the content intended for the caption in a data- attribute, and read that:

<img src="upper-butte-creek-falls.jpg" alt="Photograph of Upper Butte Creek Falls" data-caption="Cascade at Upper Butte Creek Falls, Oregon, USA" >

In your JavaScript:

caption = who.getAttribute("data-caption");

That’s it! Automated image captioning and element creation, which then be used in any kind of presentation, such as a Pintrest-style gallery or a 3D carousel.

Images derived from photographs by Ian Sane, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/twAqk