I’m looking for a way to remove the title attribute from images, preferably through using a hook or a filter.

Most clients don’t bother giving images a proper title, thus eliminating the purpose of this attribute. I prefer no tooltips to random, non-descriptive ones.

Post Views: 1

3 comments

I would strongly discourage this. A better, more sustainable practice would be to educate your clients on the value of the title attribute and teach them how to use it properly.

Simply removing it is putting a bandage on the symptom, not combating the disease.

However, if you do want to remove the attribute anyway, there are a couple of ways to do it:

Use a Content Filter

Post content runs through a filter before being displayed on the screen. This filter will do several things: transform quote marks into curly quotes, capitalize the P in WordPress, etc. It also handles shortcodes that are present in the content.

You can pass your content through a filter that uses regular expressions to find <img /> tags and remove the title attribute.

Use a Plug-in

A quick search of the plug-in repository returned Img Title Removal, a plug-in that claims to do exactly what you want. A quick look at the code shows it does option 1 exactly:

<?php
/*
Plugin Name: Img Title Removal
Plugin URI: http://www.glauserconsulting.com/2008/11/nu-agency/
Description: Filter plugin that removes all title tags from images in posts.
Author: Ivan Glauser
Version: 0.2.1
Author URI: http://www.glauserconsulting.com
*/

add_filter('the_content', 'remove_img_titles');

function remove_img_titles($text) {

    // Get all title="..." tags from the html.
    $result = array();
    preg_match_all('|title="[^"]*"|U', $text, $result);

    // Replace all occurances with an empty string.
    foreach($result[0] as $img_tag) {
        $text = str_replace($img_tag, '', $text);
    }

    return $text;
}
?>

Use JavaScript

A third option would be to dynamically remove the title attributes after they’ve been rendered on the page. If you absolutely must remove them, this is the system I’d recommend because the title will still be in the HTML code (for screen readers) but will be removed when the document loads so you avoid the “random, non-descriptive” tooltips.

Using jQuery, you can select all <img /> elements on the page that have a title attribute and remove it. Example:

jQuery(document).ready(function($) {
    $('img[title]').each(function() { $(this).removeAttr('title'); });
});

Here’s a non-js solution without hacking the core, try this in your themes function.php file.

add_filter( 'wp_get_attachment_image_attributes', 'remove_image_text' );
function remove_image_text( $attr ) {
    unset( $attr['alt'] );
    unset( $attr['title']) ;
    return $attr;
}

If you’re looking for a way to let the title <input> field empty and not automatically loaded with the file’s name on a picture upload, here’s a way:

Goto wp-admin/includes/media.php

Line 911 <input type='text' class='text urlfield' name='attachments[$post->ID][url]' value='" . esc_attr($url) . "' /><br />

Change it to: <input type='text' class='text urlfield' name='attachments[$post->ID][url]' value='' /><br />

I also have lots of clients that dont care about this.

Remove title attribute from images