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.
Post Comments (Atom)
Click on a single comment to hide/show its text
9 comments:
Great implementation of jQuery. Keep sharing such useful tips. Thanks!
@Nirmal Shah Thank you :)
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?
@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. :)
@MS-potilas
Thanks for the great reply, thanks you very much, it is perfect for me. You're wonderful.
I didnt get it.. first i have to copy that whole code just before my < / head> tag.. then what??? please explain..
And i cant see the code now... why is that???
@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.
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.
See the hack to make the 'Post a Comment' link bigger.
Post a Comment