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.

Data provided by Pastebin.com - Download Raw - See Original

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.

Hack to expand/collapse Blogger sidebar gadgets

Previously I made the tabbed gadgets hack, which can save space in blog's sidebar. This hack serves the same purpose, but a bit differently. With this hack you can make your sidebar gadgets vertically collapsible, using jQuery. I have used it on this blog on some gadgets, and here is...

a demo blog.

You can choose which gadgets you make collapsible, and make them either closed or open initially. You can also make gadget groups, from which only one gadget may be open at one time (in this blog the search gadgets, and in demo blog the profile gadget and "read more" gadget).

To install, you need to have some computing skills and know your way around. Edit your blog's template, and paste the following code before </head>. If you have jQuery already loaded somewhere in your template, you can leave out the first line.

Data provided by Pastebin.com - Download Raw - See Original

Then you need to edit the window.load function at the end of the script. There you should add calls to cedgAddOpen or cedgAddClosed for all those gadgets that you want to make collapsible (and open or closed by default). Use gadget ID, preceded with #, or gadget title, as parameter. Using "#ID" is preferred method. You can easily see the IDs of the blog's gadgets at end of the template, when widget templates are not expanded.

To make a gadget group, pass several ID parameters to cedgAddOpen. The first ID's gadget will be opened initially, others closed. Example: cedgAddOpen("#Profile1", "#HTML1"); You can call cedgAddClosed again for the first gadget's ID if you want it initially closed, too.

Note: if you use also tabbed gadgets, you cannot collapse gadgets that are made into tabs.

As you can see in the CSS, the little plus and minus signs are implemented as base64 images. You can change them if you want, and they can be external images, too. Also other styles, and the gadget spacing, can be easily changed. You may also want to style the gadget titles (H2 element), I use a gradient there, here are instructions.

Templates: blogID in posts widget layout data tag

This might be quite new feature, I just discovered it today (by browsing through template sources): blogID is now available in posts widget in the layout data tag "data:top.id". So if you are making Blogger hacks or templates, you can use this instead of telling users to edit their blogID into the code.

Clear button for CSE search results

Blogger's normal search capabilities (search gadget and navbar search) did not work in my blogs, that's why I use CSE (custom search engine) gadget, and my hack for navbar search.

One thing that I was missing from Blogger's search gadget was the little X-button to close the search results. Well there's one next to the search button, but none in the search results area. Now that I've learned some jQuery, I did a nice little hack to add that close button into the CSE search results, like this:

It is also installed in this blog, so you can test it live.

You have to have my navbar search hack installed first, because code needs the variable customSearchControl (and uses also searchPhrase, if present). And you need to have jQuery loaded somewhere in your blog's template. After having these the installation is easy. Open the HTML/Javascript gadget, that contains your blog's CSE search gadget. Before the last line (</script>), add this code:

Data provided by Pastebin.com - Download Raw - See Original

Save gadget and test.

Expand/Collapse all comments texts, for threaded comments v2

This is simple hack, it installs links for collapsing/expanding all comments' texts. You can test the functionality here.

You must have threaded comments v2 installed for this to work. Edit blog template, expand widget templates, find lines:

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>

After those lines, just before line that contains <H4>, add this code:

Data provided by Pastebin.com - Download Raw - See Original

Save template. You're done.

Blogger threaded commenting hack v2

Blogger announced its own threaded commenting on January 12th. I thought that soon my good old threaded comments hack would not be needed anymore.

But Blogger's implementation of threaded comments has its limitations, and bugs, too. So I decided to give my threaded commenting hack a new round, and made version 2. It is now installed on this blog, you can see it and test it for example in the threaded commenting playground.

Features include:

• (relatively) easy install, just one piece of code copied to template
• contains Reply links to comments hack
• contains highlight author comments hack
• expand/collapse individual comments
• style is similar to Blogger threaded comments
• max threading levels can be specified
• if you have used Blogger's threading, can read that threading information
• works with major browsers, tested on Internet Explorer, Firefox, Opera, Chrome
• I must have forgotten something. Did I mention that it is great? :)

To install this, just edit your blog's template, copy the following code (use the "Download Raw" link) and paste it just before </body> in the template. If you have jQuery loaded previously in the template, you can delete the first line that loads jQuery. If you had my previous threaded commenting hack installed, remove that code (the javascript part). You don't need to install any hacks beforehand, like in the previous version: this hack includes them, if they are not installed.

Data provided by Pastebin.com - Download Raw - See Original

This works at least on Simple template. If your template is heavily modded, then this hack might not work without modifications. And this hack does not work on dynamic views, and does not work if Blogger's threaded commenting is active. If you need to disable Blogger's threaded commenting, see this article.

Update August 31th 2012: If you have this installed, and threading stopped, please install this update.

Templates: Is comment author blog admin? An easy test

If you make Blogger templates or template based hacks, this info might interest you. In the comments section, usually in <b:includable id='comments' var='post'>, if one needs to check if the comment author is blog admin, often seen solutions include:

<b:if cond='data:comment.author == &quot;PUT_USERNAME_HERE&quot;'>

and

<b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/01234CHANGETHIS56789&quot;'>

But the easiest way, and least error prone, is:

<b:if cond='data:comment.authorClass == &quot;blog-author&quot;'>

After realising this, I updated my How to Hightlight author comments in Blogger hack to use this easier method.