Oct 22 2015 0

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'));
    }
});

Previous post
Fixing dead links With the migration from Scriptogr.am to Blot.im the URLs for my posts changed a little. One due too the difference between to two services (/post/)
Next post
Happy New Year 2016
This blog is powered by Blot