Update: Script has been updated. Changelog here.
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! :)
17 Comments
There is a slight glitch.
When you mouseover on the caption, it flickers.
Apart from that, this is a great utility to have. :)
I think that makes something nice possible with Blogger which was missing.
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……
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… ;)
“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.
@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?
@avatar : thank you sooo much….. i even read the two posts(hehe!).
@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
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?
“ 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
Thanks, man!
Hi… I tried to use it en blogger and it works very well
But I have a problem… when I try to use this hack with images uploaded (and resized) by blogger… the code is like this:
THEN, the container gets the width but the image doesn´t and it\’s full sized. You can see it in: http://pruebamozz.blogspot.com/
Do you know how can I fix it?
Thanks!
sorry… I don\’t know how to put the code in there :P
I need to clean up the code a little. I’ll probably get around to doing that in a few days. Keep checking back or subscribe to my feed.
Thanks!!!! I will!!! :D
[…] class. Now it accounts for multiple classes (for “capt left frame” scenarios). Initial instructions here. ✓ Friday, 15 August ‘08 .comment-divider { height: 2px; } h2#comments-head { font-size: […]
Leave a comment
RSS feed for comments on this post. TrackBack URL