Image alt and title attributes

Most of the time I keep the information for the alt and title attributes of an image the same. For this reason I never specify the title information in the markdown version of a post. So instead of writing this

![Alt text](/path/to/img.jpg "title text")

I prefer to only write the following

![Alt text](/path/to/img.jpg)

This save me some typing and in the case when I decide to make changes later I only need to change it once or worse change one and forget the second.

The downside of this workflow is that basically the alt information is ‘lost’ since I have the Blot.im option ‘Caption’ turned off. Most browsers show the information specified as a title in a little pop-up when one hovers over an image.

So instead of providing information for the title attribute manually for all of the images I have written some jQuery to take care of this.

The following piece of jQuery code has been added to the template script.js. For all of the images that do not already have a value for the title attribute it takes the value of the alt attribute and applies it to the title attribute.

1

$('img').each(function() {
    var title = $(this).prop('title');
    if ( title === '' ) {
        $(this).prop('title', $(this).prop('alt'));
    }
});