Skip to content

Sprucing Up Images and Captions in WordPress

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!

Yay! 🎉 You made it to the end of the article!
Alex Denning

4 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
George Donnelly
October 27, 2010 9:03 pm

Great stuff, thanks for sharing. In my case for some reason the text of the caption becomes less legible but still very cool.

Doug C.
April 4, 2010 3:27 am

I agree with Ash.

Ashfame
March 22, 2010 5:26 pm

Alex,

I feel the need of screenshots in this post. It’s better to see the end product beforehand.

Jauhari
May 26, 2010 12:31 pm
Reply to  Ashfame

The Demo more better 😉

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

4
0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...