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:
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!
This is terrific, thank you so much.
Is there any way to move the overlay so that it sits flush to the right side of the image?
Like a total WP newb I tried building a fully featured HTML5 site with the new tags: , and all only to find that WP image captions don’t do it this way. Wouldn’t it be good to have a caption core setting for the output type to be either ‘HTML4’ or HTML5..? Maybe that is the next step for this, as you have stated, largely unused feature…
It’s been shown that captions are highly read by visitors so in my opinion you’re wasting a chance at increasing conversions by either having none, or implementing something that potentially confuses the image and the visitor.
Great code and certainly good to know how to do this though thank you!
I hadn’t really considered that 🙂 Of course, though, with the latest update to captions, you can just slot HTML into those captions.
Wow, nice idea. I have to admit, I tend to ignore caption styling — my caption styles haven’t changed much since Kubrick! O.O
Yeah, that’s what I’d heard from a lot of people. Hopefully this’ll prompt a few people to update 🙂
I like it, though I think it should be positioned left a little, maybe half as far left as it is pushed up, which would give it a ribboned effect.
As far as the caption obscuring the image, it’s rare that an image is going to have such important information that close to the bottom, but even if it did, there are ways around that, too. I would suggest adding a hover style to the image that changes it’s z-order above the caption. This would effectively hide the caption when the image was focused upon, while still providing the stylish caption for normal display.
Sure – what I’ve got here is actually quite simple so it’d be interesting to see what people do with a slightly more fancy version 🙂
If you wanted to remove the caption on hover, you could just use something like this and maybe add some nice CSS3 transitions, too:
.wp-caption-text:hover{ background-color: rgba(0, 0, 0, 0.5); }I like the idea. My only concern would be that the caption now sits on top of the photo obscuring a portion of it from readers.
Yeah – Shawn’s suggestion of going transparent on hover would do the trick for that, though 🙂