CSS image captions for Blogger

For some strange reason Blogger has no built-in facility for creating image captions. Thankfully I managed to track down a great captions system that relies purely on CSS styling…

From the get-go I’d like to state that I came across the original captions article over at Blogger Buster and you can find it here – Add Stylized Captions to Images in your Blog Posts.

However I was still having a few problems displaying captions underneath my images in IE and Safari – in a nutshell weird things were happening with my image alignment…

Cute isn't she?

Then one of Blogger Buster’s readers posted the solution (you’re a legend Andrew). Please feel free to read Amanda’s original article but in the interests of simplicity I have included all of the necessary steps here as well.

Step 1 – install the CSS in your Blogger template

Go into your Blogger “Layout” page and select “Edit HTML.” As always – make sure you save a backup copy of your template before fiddling about with your blog’s innards hehe.

Find the </b:skin> tag and insert the following code just BEFORE it:

.left-caption { float: left; clear: left; margin: 0pt 10px 3px 0pt; padding: 0.5em; text-align: center; } .right-caption { float: right; margin: 0 0 1em 1.5em; padding: 0.5em; text-align: center; } .center-caption { margin: 0 0 1em 0; padding: 0; text-align: center; } .left-caption img, .right-caption img, .center-caption img { margin: 0 auto; display: block; } .left-caption p, .right-caption p, .center-caption p { background: #eee; margin: 0; line-height: 1.6em; padding: 0.5em; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; font-size: 0.9em; color: #333; }

Now save your template.

Step 2 – tweak your post images

Now whenever you want to include an image with a caption inside a post you need to click the POST option “Edit HTML” and add the following:

<span class="right-caption" style="width: (image-width)px"><img src="http://www.yourwebsite.com/yourimage.jpg"/><p>Your caption goes here.</p></span>

The above code will align your image and caption to the right. You can change this by substituting either the left or center caption classes.

Attention: if you upload images to Blogger choose “NONE” in the layout option.

Also make sure you give your image a width – substitute a number in the code above where I have (image-width) – it could be “width: 326px” for example. This is very important and will stop all of the IE and Safari browser alignment weirdness that I mentioned earlier.

And of course be sure to add the correct image URL, not the one I included above.

Please note: remember to factor in image borders and padding to your overall image width i.e. if your image is 320px wide, has a 1px wide border and 2px of padding this will add 6px onto the overall width taking it up to 326px.

Feel free to tinker with the CSS if you want, you can easily change the background color of the captions and so on. Just save your template first!

To summarize:

1. We defined some classes inside our Blogger template (i.e. left-caption, right-caption, center-caption).
2. We applied preformatted styling to these classes.
3. We applied this to the images inside our posts using span tags.

And that's all there is to it!