01 March 2007

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

Caption previewThe 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! :)


12 comments

Deepak said...

There is a slight glitch.
When you mouseover on the caption, it flickers.

Apart from that, this is a great utility to have. :)

Ramani said...

I think that makes something nice possible with Blogger which was missing.

Aditya said...

>Deepak: Yes, I know about that. I guess I could fix it, but it doesn't cause much of a worry :)

>Ramani: Glad you liked it :)

Sumesh said...

great hack. i wanna link to it!

@avatar: can you put up a screenshot of your present(or even the previous) blog design, and maybe short RSS feeds? i have not seen your blog, and from all the great things i have heard about it and you, i am curious. please......

Singpolyma said...

Is REL legal on IMG? Even then is this a 'proper' use of REL?

I love this hack -- it looks really cool... I would recommend using CLASS though... ;)

Aditya said...

“Is REL legal on IMG? Even then is this a 'proper' use of REL?”

It's not legal, by XHTML standards. But if you're on Blogger, XHTML is the last thing you should be worried about :P

Class seems a better idea though, and I'll fix it.

Avatar said...

@Sumesh

Well, i can comply to show you some old pictures of the blog look, a look with a 90% of approval.

unlike aditya that stopped lking it and even dared to told me it was outdated... :P

but that is another matter. here are some pics.

this one shows the blog main display. and it is from quite a lot time ago as you will see.

http://farm1.static.flickr.com/73/162685080_5ddf473595_o.jpg

and this other was a pic of it using Aditya last update to native search.

http://farm1.static.flickr.com/161/337791860_311b326f43_o.jpg

so, there you have it, any questions?

Sumesh said...

@avatar : thank you sooo much..... i even read the two posts(hehe!).

Avatar said...

@Sumesh

it was just one, the other were the listing from the query.

and i have seen your blog, keep it up, you got plenty of time to do good things.

-A

KG-perak said...

We are just hacks users. Thanks for your hack sharing. Yet a question remains. We find that the hack does not work in Internet Explorer browser. How could you resolve it?

Aditya said...

We are just hacks users. Thanks for your hack sharing. Yet a question remains. We find that the hack does not work in Internet Explorer browser. How could you resolve it?

Simple answer. I don’t! Internet Explorer is a completely standards deviant browser, and hence I do not fix my codes for it.

I’d ask you to use Firefox, but then I’ve done that countless number of time before with other people :P