Tip: Adding interactive captions to your Blogger images on hover

For a long time I've been disappointed with the way most content management systems provide image captions in their WYSIWYG editors. Many, including Blogger, create an old-school table wrapped around the image, put the image in the first table row, then add the caption text into the second table row. You might have the most HTML 5, up to date website, and then suddenly you're stuck using tables like it's 1998.

We believe we've created a method that is both slick and interactive, as well as quite possibly increasing your search engine performance and making your images Section 508 accessible! It involves using your image's ALT text, some JQuery, and hovering over the image (optional), and we think it's pretty cool.

Step #1: adding alt text to your images

A while ago Blogger added the ability for bloggers to add alt text to their images as well as title text to the link surrounding the image. This functionality was never heralded, simply wrapped into the larger updates of SEO, permalinks, etc. Because of this many users still are not aware of this functionality and I'm guessing only a tiny percentage of users take advantage of it.

Head to your blog post and edit the post in the Compose tab. Click on the image in your post to open the dialog options that are displayed under your image, the ones where you normally set the size or placement of the image (or even the caption). Click on "Properties" (I know, you probably have overlooked this dozens of times).


A dialog window is now displayed where you can set the title text of the image's wrapping link, or you can set the alt text. We're going to use the alt text for our purposes. Put in your caption as the alt text and hit OK.


Save your post updates.

Step #2: the JQuery code

You can access a clean version of the code here.


<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/

var altBackground = "#ffffff";
var altTextColor = "#000000";
var altPaddingTop = 5;
var altPaddingBottom = 8;
var altPaddingSides = 5;

$(document).ready(function(){
$('.post-body').find('img').each(function(n, image){
        var image = $(image);
var alt = image.attr('alt');
var id = image.index();
var imageAltId = 'imagealt'+n;
image.parent().addClass('postImage');
var paddingString = altPaddingTop + 'px ' + altPaddingSides + 'px ' + altPaddingBottom + 'px ' + altPaddingSides + 'px'
image.after($('<div>').css('padding',paddingString).css('color',altTextColor).css('background-color',altBackground).css('opacity','0.6').css('filter','alpha(opacity=60)').attr('id',imageAltId).text(alt));
var divHeight = $('#'+imageAltId).height() + altPaddingTop + altPaddingBottom;
$('#'+imageAltId).css('margin-top','-'+divHeight+'px');
    });
});
//]]></script>
<style>
a.postImage div {
display: none;
} a.postImage:hover div {
display: block;
}
</style>


What we're doing in this script is dynamically grabbing the alt text from the image (that you added in Step #1), creating a new div after the image but inside the link, inserting the alt text into that div, and then only displaying it when you hover over the image.

To use this code you need to insert it into your template before the /head tag. You can wrap it within the standard if/else statements so it only operates on certain pages or types of pages, and you can customize the CSS in the style information area included in the code sample.

To see an example of this code in action please visit this demo page (the first image)

Enjoy!

Comments

  1. You are so right! I never paid any attention to "properties" - mainly because I had no idea what I could do with them or what impact they have. This is the first time I've seen any info on the topic and I appreciate this! Thanks.

    ReplyDelete
  2. Very cool! Just what I have been looking for. Earlier I have been trying to use the alt text as caption with the code that I found here. But it kept pulling the last images alt text and applying it to all teh others. You code works by pulling the code but, when the alt text is longer is does not break in time and pushes the image to a side adding more "padding". Here is how it is looking on my site. link
    Got any clues what I could do about it?

    ReplyDelete
    Replies
    1. You have CSS that is creating that behavior, specifically:
      .post img {
      float: right;
      }
      The script as written is also creating a div whose width is the width of your image in the DOM; the other problem is that you have .gallery img sizing the image in the CSS instead of the DOM.... try setting the max-width or width of the div that the alt is creating to be 250.

      Delete
  3. No worries! I did not see the little css snippet that you had included, but all is well now. My hat goes off to you sir! :) So so soo useful I am supprised that people do not use this more.
    Cheers!

    ReplyDelete
  4. I have noticed that this same result can be achieved by just using css. Using a pseudo :after and writing in the alt text with content: attr(alt); on :hover. This method does not support transitions though. So no nice fade in or fade out.
    The fades could be achieved with your code though, with some additional mouseover jQuery. I have been messing around with it but can not get it to work. What do you think?

    ReplyDelete
  5. Sure, something like:

    $("a .postImage").hover(
    function(){
    $("a .postImage div").fadeIn('slow', function() { });
    },
    function(){
    $("a .postImage div").fadeOut('slow', function() { });
    }
    );

    (pseudo-coded)

    ReplyDelete
  6. Nice, this seems to be the solution. But since I have the same selector for the images, the alt text flashes on all of them on the same time on mouseover.

    Here is what I'm working with:

    $(".gallery").mouseover(function(){
    $("a.postImage div").fadeIn("slow");
    });
    $(".gallery").mouseout(function(){
    $("a.postImage div").fadeOut("slow");
    });

    Is there a way to get the alt text to show on only the image that the cursor is over? This is going way beyond my coding capabilities, but learning is fun!

    ReplyDelete
  7. look into using "this" to refer to the parent that you're calling the function on, then get the a.postImage div of the parent

    ReplyDelete
    Replies
    1. Thanks for the tip! I had it working but now i must have messed it up. I have deleted the code and pastrd it again as original with the original css, but nothing happens on hover. Darn it! With css i could get the hover to smoothly fade up from the bottom. But i cant understand why on earth it is not working anymore. Do you think you have a sec to check it? Here Thank you.

      Delete
    2. Well, it looks to be working, but doing something else entirely... but working?

      Delete
    3. Hi David! Yes the script works fine. The problem is when editing and the page loads in the "composer" instead of the "html" window. Some autoformating gets added. Even if i cannot see the changes in the code, it screws it up. So everytime that happes I have to close the page window, open a post in the "html" editor then close that one and then open the page window again. It open with the last used editor mode. So I let the blogger crew know about this.. although i am sure they are aware of it. Its meant to make life easier for some, but it can cause seerious meltdowns for others! :)
      As for the code, it works like a charm. I added some css to it, positioning it way up and hidden. Then on hover the caption is positioned absolute and with the use of visibility:visible; it get's a fly in effect.

      Delete

Post a Comment