Add captions to images

Edit: Updated to check for a class="capt" instead of rel. This is to stay in regard with well markup-ness. Thanks to Steve for the tip!

---

This is one of those things which is so common, you wonder why it isn't there natively in HTML and CSS. An image without a caption is almost code without comments, not very informative.

So I've written a quick piece of code to help you do that. I have it implemented here, and I'd like to see you (my beloved reader) use it! :) Just follow the instructions below, and read carefully, because it adds a few functionalities to a normal image tag.

Just a line

This being another one of my 'easy addition' scripts, you just need to add in a simple line:

<script src='http://jscripts.ning.com/id/3459063?minify' type='text/javascript'></script>

To style image and captions, use this default template, and modify it to your liking:

.image_container {/* contains image and caption */
 background-color: #C0C0C0;
 border: 1px solid gray;
 font-family: Verdana, sans-serif;
 padding: 5px;
 margin:5px;
 float:left;
}

.image_container img{/* the image */
 border:1px solid gray;
}

.image_container span {/* the caption */
 color: white;
 display: block;
 font-size:7pt;
 font-weight:bold;
 margin: 5px 0px 0px;
}

That is all it takes to get the captions created :)

Usage

The usage is pretty simple. Write your image tags like you would normally, and add an attribute class='capt', so that the script can recognise that it needs to captionize that tag. The text for the caption itself will go in an alt attribute.

So, a sample tag which could get captionized would be:

<img src='http://www.google.com/logos/valentine07.gif' class='capt' alt='I love Google!'/>

If you don't add the alt attribute, it'll still captionize it, but without a caption (it'll surround it with a Silver background and add borders).

Another cool thing (one I threw in for fun) that you can do is add an optional align attribute. It can take two values, 'left' or 'right', which will decide which way your image goes. It basically floats it to the direction specified. Makes for some quick styling. If you leave it empty, it'll use your container's default float property if you have one. Here's a demo page putting everything together.

This script will not affect your images in previous posts, because they won't have the captionizing attribute, so it'll leave them alone. Will save you the worry of your previous post's images going awry!

That's basically it. Make your images look better! :)