Typically, when you add an image to your posts, wordpress assigns certain attributes to the img tag, depending on what you chose in the image upload editor form.
The following selection set…

Will result in the following image tag added to your post’s HTML code:

<img src="http://www.webtechwise.com/wp-content/uploads/2010/06/rss-icon.jpg"
 alt="" title="rss-icon" width="30" height="43" class="aligncenter size-full wp-image-1525" />

However, in some cases you may want to edit these attributes to suit your needs.
Like in many other WordPress tweaks, the add_filter function comes to play, so this is a great way to learn how to use filters and what do apply_filters and add_filter mean exactly.

The get_image_tag function (below) is included in WordPress core files (specifically, in the wp-includes/media.php file).
This function creates the img tag for the image you inserted. As you can see, it handles some important attributes for your image, including ID, title, alt, align and size.

function get_image_tag($id, $alt, $title, $align, $size='medium') {

	list( $img_src, $width, $height ) = image_downsize($id, $size);
	$hwstring = image_hwstring($width, $height);

	$class = 'align' . esc_attr($align) .' size-' . esc_attr($size) . ' wp-image-' . $id;
	$class = apply_filters('get_image_tag_class', $class, $id, $align, $size);

	$html = '<img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" title="' . esc_attr($title).'" '.$hwstring.'class="'.$class.'" />';

	$html = apply_filters( 'get_image_tag', $html, $id, $alt, $title, $align, $size );

	return $html;
}

Line 5 above (highlighted), includes the apply_filters call, which is called a hook, or in other words, an invitation for you to rewrite the function specified in the hook (in this case, set a new class for the image).

As I explained in this post, it is not wise to edit WordPress core files directly.
Instead, you should create a new filter function in the functions.php file located in your WordPress theme folder.

For the example, let’s set the class of the image to always be “post_image”:
Add the following filter function to functions.php:

function my_image_tag_class($class){
$class='post_image';
return $class;
}

add_filter('get_image_tag_class','my_image_tag_class');

If you take another look at the get_image_tag function, you will see that there is one more apply_filters hook in line 7 – $html = apply_filters( 'get_image_tag', $html, $id, $alt, $title, $align, $size );
This hook, invites you to rewrite the entire get_image_tag function with all the image attributes and not just its class.

For the example, let’s set the alt attribute to always have the same value as the title attribute.
To rewrite the entire get_image_tag function, add the following filter function to functions.php:

function my_image_tag($html, $id , $alt, $title){

$html = str_replace('alt=""','alt="'.$title.'"',$html);
return $html;
}
add_filter('get_image_tag','my_image_tag',10,4);

Note that in line 5 (highlighted above), the add_filter call now contains 2 more parameters that did not exist in the previous add_filter call. The first parameter is the priority of the filter, and the second parameter is the number of acceptable arguments in the function. I left the priority to default (10) and I set the acceptable args to 4, because I need to pass the $title attribute’s value to the function.

Got any questions or comments? Shoot!

Topics:   | | |