18 Add Stylized Captions to Images in your Blog Posts Using CSS April 01, 2008 /

Photo by Jurvetson

In recent weeks, you may have noticed the captions I add to images in my blog posts. Where I am showcasing the work of another author, I prefer to add a caption explaining where this image has come from, whether this be Flickr or a screenshot of another blog/website.

I've tried a few different methods to display captions beneath images, and the best solution I have found so far is to use CSS. This allows me to align images (and their relevant captions) to the left, right or center of the post with ease.

So in this post, I will explain how I achieve stylized captions beneath my images in Blogger posts using only CSS and HTML tags.

Some examples of images with captions

Left Image

Right Image

Here are some images aligned to the left, right and center with their relevant captions beneath. The caption appears below the image with a border beneath which separates it from the main body of the post.

This is achieved by wrapping both the images and the captions in <span> tags which have a "class" depending on their alignment (left, right or center aligned).

Center aligned image (Photo by Montrasio International)

How these captions work

This image demonstrates the code I use to make the captions appear beneath each image:

In the body of my posts, the code for the images and captions will appear like this:

<span class="left-caption">

<img src="http://url-of-image.com/image.jpg" />

<p>Caption of this image</p>

</span>

This example would produce an image and caption which is aligned to the left of the text in my post.

To align an image to the right, I would replace "left-caption" with "right-caption", or to center the image I would use "center-caption".

The CSS code used to produce these images and captions

If you would like to use captions which are styled like those I use in my posts, you will need to use the following styling code:

.left-caption { float: left; margin: 0 1.5em 1em 0; 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; }

Copy this entire section of code and paste this just before the closing </b:skin> tag in your blog's template code.

How to use these captions in your Blogger posts

Once you have added this style code to your blog's template, you can display captions beneath the images in your posts.

To achieve this, you will need to wrap both your image and your caption in span tags according to the alignment you prefer. Here are the three different formats you could use:

To align these to the left

<span class="left-caption">

<img src="http://image-host.com/yourimage.jpg" />

<p>Your Caption Here</p>

</span>

To align these to the right:

<span class="right-caption">

<img src="http://image-host.com/yourimage.jpg" />

<p>Your Caption Here</p>

</span>

To align these to the center of the page:

<span class="center-caption">

<img src="http://image-host.com/yourimage.jpg" />

<p>Your Caption Here</p>

</span>

Note that the captions are also wrapped in paragraph tags, like this:

<p>Your Caption Here</p>

This ensures the caption is properly styled, as the CSS code contains the styles for paragraphs which appear within this span class.

If you upload your image using Blogger's image upload function, you must make sure that you choose "None" in the layout choices.

It may be easier for you to use the HTML editor to create posts with image captions as this will allow you to see all of the code you are using.

Other methods of adding captions to your posts

As I explained at the beginning of this post, there are many different methods you could use to display captions beneath your images. The method I explained here is the one which works best for me, though you may prefer to use a different technique.

Here are some links to other articles which offer alternative methods to display captions beneath your post images:

• JavaScript Image Captions from 1976 Design
  
  This method automatically inserts a caption based on the title of the image.
• Captions for Images in Blog Posts by Blogger Tips and Tricks
  
  This is a much simpler method, using only HTML code in the body of the post.
• Image Captions with CSS and JavaScript by Ask The CSS Guy
  
  Similar to 1976 Design's post, this article uses a combination of styling code and scripting to add a partially transparent caption over the bottom section of the image.

I hope this tutorial has been useful in explaining how you could add captions to your post images in Blogger. If you have any questions or would like to suggest further uses for this, feel free to leave your comments and suggestions below.