Pages

Monday, February 13, 2012

9

Automatic image caption from img title

I'm administering a Blogspot blog where some of the content uses img title tag to store image captions. Title tags are normally shown in a tooltip window, when user hovers the mouse over the image. There are some scripts around that display the image caption from image's title tag, but I decided to make my own. To get it quickly done, I used jQuery. This code goes before </head> tag, remove first line if you have jQuery already loaded.


Now you can use the following html markup on the page:

<img class="caption" title="Image title" src="./pics/pic.jpg" />

and it will dynamically be turned into something like this:

<div class="caption-wrap">
<img class="caption" title="Image title" src="./pics/pic.jpg" />
<p class="caption-text">Image title</p>
</div>


Use the classname "caption" and a title tag for those images you wish to autocaption.

Alignment and left/right margins are copied from img to the wrapping div, so horizontal positioning of the title paragraph is (should be) the same for basic image alignment options (centered or float left/right).

Here's a link to an example article with many auto-generated image captions, the blog is in Finnish, article is about prohibition: Nobel-palkitut ja huippupoliitikot vaativat huumeiden laillistamista.

Blogger post editor's "compose mode" has possibility to set image captions. But I think compose mode is not reliable, and so I mainly use the HTML editing mode. Also the HTML markup is much simpler using title tags and this script.

If you use this, you can adjust the script and the styles for your needs. This script can also be used outside Blogger.


Update January 21st 2013: Changed the script to use $(window).load() function instead of $(document).ready(), which makes sure that outerWidth function always returns the image width correctly. Line 31 was changed.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

9 comments:

Nirmal Shah said... [reply]

Great implementation of jQuery. Keep sharing such useful tips. Thanks!

Olo said... [reply]

Thank you very much, but I was looking for something else...
Can you make a tip that automatically adds alt and title tags for all images on blog post from post title?

MS-potilas said... [reply]

@Olo
I did not test this thoroughly, but try something like this:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
$(window).load(function() {
$("div.post-body img").each(function() {
title = $(this).parent().parent().parent().find("h3").text().trim();
$(this).attr("alt", title)
$(this).attr("title", title)
});
});

Place the code before </head>. Hope this helps. :)

Olo said... [reply]

@MS-potilas

Thanks for the great reply, thanks you very much, it is perfect for me. You're wonderful.

Deepak Awasthi said... [reply]

I didnt get it.. first i have to copy that whole code just before my < / head> tag.. then what??? please explain..

Deepak Awasthi said... [reply]

And i cant see the code now... why is that???

MS-potilas said... [reply]

@Deepak Awasthi
Sorry for late answer, I've been away from the blog. You have to edit your template, and copy the code and paste it before </head>. Then save the template and the script is installed.

After the script is installed, you use it in your posts. When editing a post in html mode (must use html, compose mode does not work), you can give img element the class "caption" and set its title attribute. The script places contents of title attribute below the img when viewing the post.

Temporary said... [reply]

Is there any way to modify this script so that it simply grabs the img file name from the src attribute of the omg tag and use that for the caption? I am looking to eliminate the need to manually add a class and title to each tag.

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: