Sprucing Up Images and Captions in WordPress

Posted on 22. Mar, 2010 by Alex Denning in Theme Customization, Update

In post images and captions aren’t usually a very exciting affair. Most themes don’t offer any support for captions and those that do don’t do anything exciting with them. In this post we’ll explore how to automatically spruce up your images, videos and captions the easy way.

The potential for captions is huge—not just the standard grey box, but overlays, clever uses of type and some pretty cool CSS3 effects.

The first thing to do is to look at what exactly a caption does. Turns out it’s quite clever: it wraps the image with a div and applies a class to the image:

<div id="attachment_id" class="wp-caption">
<img  />
<p class="wp-caption-text">Caption here.</p>
</div>

This means you can target only images which have captions with your CSS. For example, here we can add a massive border to images:

.wp-caption img{
border: 10px solid #eee;
}

As Adii does, you might then want to then add some fancy CSS3:

.wp-caption{
border: 10px solid #eee;
-webkit-box-shadow: black 0px 1px 5px;
-moz-box-shadow: black 0px 1px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
}

That adds a subtle shadow and rounds off all the corners nicely. I’m assuming at this point that your browsers supports these. Note too that if your images are normally full width you’ve just added on an extra 20px either side.

Video borders and shadows

You can apply the same border and shadow to videos, too. Most embeds use the object syntax and you can target that with your CSS. You’ll want to add .hentry or whatever your theme uses for posts beforehand so it just gets applied to embeds within posts:

.hentry object {
-webkit-box-shadow: black 0px 1px 5px;
border: 10px solid #eee;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
}

That ends up giving you pretty cool videos and images! They’re certainly going into the next design of WPShout and I’ve already got them on my personal site.

Captions

The next thing We’ve dealt with images, now for captions. We’re going to add a rather cool caption overlay thing. I mean something like this (apologies for the blur):

Something like this is actually quite easy to do, as the caption adds a div wrapping the image, as we saw earlier.

Add position: relative; to .wp-caption and then you’ve got some text you can move around.

As we saw, the text has the class wp-caption-text so we can target that easily, using absolute positioning to move the box up from the bottom of the image and RGBA for the transparent background:

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

Then just add your caption and you’ve got some awesome images.

Summing Up

I think this is pretty neat and shows the true potential for captions, something that I know most people don’t use. So go and integrate this into your themes! The caption revolution starts here!

Enjoyed the post? We'll see you on Twitter or in your RSS reader!