Remove image attributes when inserting it in a post WordPress
- SOLVED
When you upload and insert an image to a post, WordPress adds a bunch attributes to the image, including the alt and title tags, width/height and css classes.
Example:
<img src="myimage.jpg" title="my image" alt="my image" width="100" height="100" class="aligncenter size-full wp-image-1" />
I want to insert the image file, with only an empty alt tag. Removing all other attributes. This is what I´m aiming for:
<img src="myimage.jpg" alt="" />
I found a function that removes the width/height, but the title, alt and class attributes are still added to each image. With some additional regex magic it should be possible to remove those as well.
I hope someone can help me customize this function to have it remove all attributes.
Important: I don´t need to edit any image tags in my database, just the html that´s sent to the editor. Here´s the hook we can use: https://developer.wordpress.org/reference/hooks/image_send_to_editor/
Below is the function I´m using now:
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}
Many thanks!
Answers (5)
Romel Apuya answers:
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height|title|alt|class)="\d*"\s/', "", $html );
return $html;
}
Romel Apuya comments:
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height|title|alt|class)="\*"\s/', "", $html );
return $html;
}
Andrea P answers:
I think Romel function is the correct approach, but as it is, it will match only numeric digits as content.
with this regex it should then work perfectly
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height|title|alt|class)=".*"\s/', "", $html );
return $html;
}
moonshotmedia comments:
Thanks Andrea, your solution worked! It now inserts just the image URL. Example:
<img src="image.jpg" />
Do you know how to add an empty alt-tag? Like this:
<img src="image.jpg" alt="" />
Andrea P comments:
yes, it's very simple.
basically what the function does is to get the full html string of the image (like the one you posted with all atributes)
then it searches for matching pieces of that html string, and it replace them with something else.
th second element in the function preg_replace() is what do you want to substitute the matching with. in the sample, it substitute it with nothing, so actually it delete them.
but if you change that second element, and put something like 'alt="your alt tag"' , it will substitute the matching attributes, with that only alt tag you passed.
like this (mind the single quotes to wrap your string, so the double quotes inside them will be read as part of the string):
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height|title|alt|class)=".*"\s/', 'alt="your alt tag"', $html );
return $html;
}
moonshotmedia comments:
Thanks for the solution and the explanation. Much appreciated!
Reigel Gallarde answers:
try
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html) {
preg_match( '/src="([^"]*)"/i', $html, $matches ) ;
$html = '<img src="'.$matches[1].'" alt="" />';
return $html;
}
Reigel Gallarde comments:
updated...
Shoeb mirza answers:
For title try this
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;
for alt
jQuery(document).ready(function($) {
$('img[alt]').each(function() { $(this).removeAttr('alt'); });
});
for class do this
add_filter( 'get_image_tag_class', '__return_empty_string' );
Let me know it they work or not..
Darlene Grace Arcenal answers:
Hi,
You can try this jquery approach:
$(document).ready(function(){
$('img[alt]').each(function() { $(this).removeAttr('alt');});
$('img[class]').each(function() { $(this).removeAttr('class');});
$('img[title]').each(function() { $(this).removeAttr('title');});
});