How to Change Image Attributes in WordPress Posts

Contributing Editor

WordPress allows users to place an image into page or post content. Typically, the following HTML code is produced:


<img src="http://www.mysite.com/wp-content/uploads/2011/07/myimage.jpg" 
alt="my image" title="my image title" 
width="100" height="100" class="aligncenter size-full wp-image-123" />

Nothing too horrific, but what if you want to:

  • add your own classes
  • remove the domain from the URL (probably unnecessary unless you’re using RSS feeds)
  • remove the width and height attributes for scaled images in a responsive design?

Fortunately, WordPress provides a couple of filter functions to help you modify the HTML. They can be placed in your theme’s functions.php file or within a plug-in.

important: <img> code is created on insert

Unlike other WordPress content filters, <img> tags are generated when the editor inserts the image into the post. Therefore, these functions will not change code for images which have already been added to a post.

Therefore, the only way to test your code is to repeatedly add and remove images. I recommend switching to WordPress’s HTML view to check the result.

Changing the Image Class

The easiest and most commonly used filter is for the image class:


function image_tag_class($class, $id, $align, $size) {
	return $align;
}
add_filter('get_image_tag_class', 'image_tag_class', 0, 4);

The image_tag_class() function accepts 4 string parameters: the existing class, the image ID (numeric), the alignment (none, left, right, center), and the size (normally ‘full’). It returns a string which will become the <img> tag class. In this example, we’re simply returning the alignment string.

Advanced Image Modification

If we need to make fundamental changes to the <img> tag, we need a filter which can modify the returned HTML directly using string or regular expression replacements, e.g.


function image_tag($html, $id, $alt, $title) {
	return preg_replace(array(
			'/'.str_replace('//','//',get_bloginfo('url')).'/i',
			'/s+width="d+"/i',
			'/s+height="d+"/i',
			'/alt=""/i'
		),
		array(
			'',
			'',
			'',
			'alt="' . $title . '"'
		),
		$html);
}
add_filter('get_image_tag', 'image_tag', 0, 4);

The image_tag() function accepts 4 string parameters: the generated HTML, the image ID (numeric), the alt and title text. In this example, we’ve stripped the domain name from the src URL, removed the height and width attributes and replaced empty alt attributes with the title text. You can change the function accordingly for your own substitutions.

While HTML <img> tag modification is not something you’ll need every day, it’s useful to know that WordPress supports the feature.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://dguru.net/ Bub rupam Jcb

    nice post thankyou

  • http://dguru.net/ Bub rupam Jcb

    nice post thankyou

  • http://dguru.net/ Bub rupam Jcb

    nice post thankyou

  • Tim Holt

    Is there a way of modifying the output to wrap the entire img tag in a div with a given class? I find it really annoying when the image is wrapped in a paragraph tag due to the autop function, so I often wrap the image in a div (with an empty class, or else the div can be stripped also).

    I have long wondered if there is a simple solution to this behaviour, short of disabling autop. Any ideas?

    This post is very handy nonetheless, I usually delete the verbose attributes when working in HTML mode, so this will save me the trouble.

    Tim.

  • jon ark

    Really helpful. I am new in word press and presently working to make our own company (Hossain Enterprise) blog. Hope to know more from here if I face problems. Thanks.

  • Daz123 Daz

    What you could do is to look whether a class is being used or not and of course it has been used, then simply replace it with your desire code…
    I can write you the code if you wanted it! :)

  • http://www.chrisfarrellmembershipsitereview.com/ Steve Balliett

    I’m really enjoying my WordPress websites.
    They are becoming easier and easier to build.
    I especially like the Insert/Upload section where the “first square” icon says Image.
    I can adjust my image to just the right size I want.
    It makes it more fun once you get the hang of navigating around the dashboard.
    I am so glad I chose WordPress as my website platform.
    The last website builder I used was not SEO friendly.

  • Josh

    Thanks, very useful info. I’m using it to clear the image width/height attributes for responsive design!

    Follow-up question: After the image has been inserted and image_tag runs, the user can then update that image’s settings from the editor. When the user does the update, the image_tag does not fire again, and the width & height values are re-inserted. What function/filter is operating when the user uses the “update image settings” feature in the editor, and how can we re-add this filter to that function?

    Thanks!