The latest WordPress update introduced HTML editing captions, reminding us all that captions are in fact a feature in WordPress.

They’ve not exactly been embraced as the über feature we initially hoped for; many sites still prefer to go for writing under an image in italics instead of using the captions. Smashing Magazine, for example still just have their images and then a short description underneath acting as a caption:

So why don’t we like them? I’d like to suggest it’s because the default captions, well… I’m trying to think of an eloquent way of putting this. Essentially, they look a bit pants. But it doesn’t have to be that way! Today I’ll be showing off how I do my fancy overlay captions here on WPShout, as introduced in the latest redesign.

What we’re making

My proposal for better WordPress captions is that instead of displaying a little bit of text under the image, is that the caption gets displayed, featured content style, over the image. Something like this:

This, essentially, is it! A nice little overlay.

Thanks to the nice friendly HTML a caption outputs, it’s actually quite easy to do this. I’ll take you through it.

Captions’ HTML output

Customising a caption is actually quite easy, thanks to the nice friendly HTML output they generate. The following is a standard caption:

<div class="wp-caption">
	<img class="size-full wp-image-1159" title="Test test test!" src="test-img.jpg" alt="Test image" />
	<p class="wp-caption-text">This, essentially, is it! A nice little overlay.</p>
</div>

It’s just an image and a paragraph containing the caption text encased in a div with the caption’s class. This is great news as it means we can more or less do anything we like this it. Let’s try out my little overlay idea.

Building the overlay

This too is quite simple; it just needs a little bit of CSS. This is a simplified version of what I’ve got here on Shout. Just need to set the wrapping div, .wp-caption, to relative and then position the paragraph containing the caption on top of the image, using RGBA to create a black transparent background:

.wp-caption{ position: relative; }
.wp-caption-text{ background-color: rgba(0, 0, 0, 0.8); bottom: 60px; color: #eee; left:0; padding: 3px 10px 3px 20px; position: absolute; }

Once that’s dropped in your stylesheet, that’s actually more or less it.

Admiring the results

The results are, I think, quite neat. I asked on Twitter whether anyone actually used captions earlier and nobody replied, suggesting nobody does. Hopefully this will provide some food for thought; I’m only suggesting one way of doing it, so if anyone has any other ideas, I’d be delighted to hear them — leave a comment to let me know. Happy captioning!