How to Change Image Attributes in WordPress Posts

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.

Frequently Asked Questions (FAQs) about Changing the IMG Tag in HTML on WordPress

How can I add an ID to an IMG tag in WordPress?

Adding an ID to an IMG tag in WordPress is a simple process. First, you need to go to your WordPress dashboard and navigate to the page or post where you want to add the ID. Click on the ‘Text’ tab to switch to HTML view. Locate the IMG tag and add the ID attribute inside the tag. For example, if you want to add an ID named ‘image1’, your IMG tag should look like this: . Remember to save your changes.

Can I add multiple IDs to an IMG tag in WordPress?

No, you cannot add multiple IDs to an IMG tag in WordPress. According to HTML standards, an element can only have one unique ID that identifies it on the page. However, you can add multiple classes to an IMG tag if you want to apply different styles or functionalities.

How can I style an IMG tag with a specific ID in WordPress?

To style an IMG tag with a specific ID, you need to use CSS. Go to Appearance > Customize > Additional CSS in your WordPress dashboard. Here, you can add your custom CSS rules. For example, if you want to add a border to an image with the ID ‘image1’, you can write: #image1 {border: 1px solid black;}. Click ‘Publish’ to save your changes.

How can I add an ID to an IMG tag in WordPress without coding?

If you’re not comfortable with coding, you can use a WordPress plugin like ‘Advanced Custom Fields’ or ‘Custom Field Suite’ to add an ID to an IMG tag. These plugins provide a user-friendly interface where you can add custom fields, including IDs, to your WordPress content.

Why should I add an ID to an IMG tag in WordPress?

Adding an ID to an IMG tag in WordPress can be useful for several reasons. It allows you to style the image with CSS, target the image with JavaScript, or link to the image from another part of your page. It also helps improve accessibility by providing a unique identifier for screen readers.

Can I add an ID to an IMG tag in WordPress using a page builder?

Yes, most WordPress page builders, like Elementor and Divi, allow you to add an ID to an IMG tag. You can usually find this option in the ‘Advanced’ settings of the image module.

How can I add an ID to an IMG tag in a WordPress widget?

To add an ID to an IMG tag in a WordPress widget, you need to switch to the ‘Text’ mode of the widget editor, which allows you to edit the HTML directly. Then, you can add the ID attribute to the IMG tag as explained in the first question.

Can I add an ID to an IMG tag in the WordPress header or footer?

Yes, you can add an ID to an IMG tag in the WordPress header or footer. However, this usually requires editing the theme files directly, which is not recommended unless you’re comfortable with coding. Alternatively, you can use a plugin like ‘Insert Headers and Footers’ to add custom code to these areas.

How can I add an ID to an IMG tag in a WordPress gallery?

Adding an ID to an IMG tag in a WordPress gallery can be a bit tricky, as the gallery code is usually generated automatically. However, some gallery plugins, like ‘NextGEN Gallery’, allow you to add custom attributes to your images.

Can I add an ID to an IMG tag in a WordPress theme?

Yes, you can add an ID to an IMG tag in a WordPress theme. This usually involves editing the theme’s PHP files, which generate the HTML of your site. However, this should only be done by advanced users, as a mistake can break your site. Always make a backup before editing theme files.