Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm working on a site based on a fluid width css template which sets a max-width on images to the width of the column containing them, and I need to remove the inline width and height dimension attributes that WordPress adds to images.

I'm doing it with my featured images with this filter:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

I know I can apply the same filter to the_content, if necessary. But is there a better way of doing this?

share|improve this question
    
First off, thanks for the very helpful code. It works perfectly to strip width and height attributes from the img tag, but for some reason it also seem to strip the caption shortcode if there is one. Does anyone know why this is and how to correct it? –  Dominic P Nov 1 '11 at 22:46
1  
Maybe you should post this as its own question? It seems sufficiently distinct enough from mine that it deserves its own response. Nevertheless, I'll try and answer... for anyone else finding this answer and having the same problem: Your problem is that the function img_caption_shortcode, which processes the caption shortcode, requires that a width be specified in the caption shortcode attributes. Otherwise, it skips the caption altogether and just returns the content wrapped inside the [caption] shortcode tags. –  goldenapples Nov 3 '11 at 12:43
    
If you want to be able to use caption shortcodes without a defined width, you will have to define your caption markup in a function that's hooked on the filter img_caption_shortcode. Writing up the code for a function like that is more than I can fit into comments here, though. –  goldenapples Nov 3 '11 at 12:50
    
@goldenapples, thanks for your helpful reply. I have done as you suggested and asked a new question here: wordpress.stackexchange.com/questions/32931/…. Any input on that would be greatly appreciated. As I explain in the question, I'm not sure the filter on img_caption_shortcode will be enough the solve the problem. –  Dominic P Nov 4 '11 at 20:19
1  
Maybe I'm missing the bigger picture of what you're trying to do without seeing your actual content, but can't this be remedied using CSS alone? If you're using a max-width on your images you should be able to conquer the height problem by adding a height: auto; to your content images. –  binaryorganic May 1 '12 at 17:11

4 Answers 4

up vote 30 down vote accepted

Thanks all!

The image_send_to_editor filter was the one I was looking for... thanks @t31os for pointing it out.

Here's my functions now.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

This removes inline dimension attributes from images retrieved with the_post_thumbnail(), and prevents those attributes from being added to new images added to the editor. Doesn't remove them from images retrieved through wp_get_attachment_image or other related functions (no hooks in there), but those cases can be processed in the templates files when necessary.

share|improve this answer
    
I had to remove the \s from the regex. After that, it worked fine. I think it was because I did not have a trailing space after the last doublequote on the height setting. –  MattSlay Oct 10 '12 at 14:55
1  
@MattSlay Is it just me that has a problem with permanently modifying the content of the site? A responsive theme shouldn't have to modify the content of the website to get it to format correctly. I vote to remove the filter from image_send_to_editor and instead add it to the_content - like this blog post. This separates presentation logic from the content. –  BFTrick Nov 1 '12 at 13:53
1  
@BFTrick - Seems like a matter of context to me. For a responsive theme, I'd agree with you because you can't depend on existing content having been processed in this way, and you don't know if the next theme installed will need those dimension attributes. In my case, I was building an app where the theme was integral to the content, so I chose the less processor-intensive method of processing the images when they were first added. But you do make a good point. –  goldenapples Nov 1 '12 at 23:43
    
Warning: This answer breaks image captions in WordPress 3.5.1. –  wired Apr 24 '13 at 23:41

Modified this script a bit. Thanks for the help!

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
// Genesis framework only
add_filter( 'genesis_get_image', 'remove_thumbnail_dimensions', 10 );
// Removes attached image sizes as well
add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}
share|improve this answer
5  
Careful, though. Filtering the_content will also filter youtube videos and any other width/height attribute. –  MikeNGarrett Jan 5 '11 at 21:59
    
True, but that may be a good thing in a responsive site. If one needs to do it for images then one probably also needs to do it for other media. –  BFTrick Nov 1 '12 at 13:50

if you set image size in function.php as a "gallery"

add_image_size( 'gallery', 200, 120, true );

you can remove width and height of specific image size such as "gallery":

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 4 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id,$post_thumbnail) {
    if ($post_thumbnail=='gallery'){
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    }
    return $html;
}
share|improve this answer

Applying that filter to the_content will fire it for all content. This will be effective, but could affect the performance and load time of your site. It would be better if you tell WordPress to just not insert the inline width and height tags when you insert images in the first place.

Unfortunately, the scripts that actually insert the image are built in JavaScript and interact with the TinyMCE wysiwyg editor. There might be a way to hook into it directly, but not using the standard add_filter() calls.

share|improve this answer
1  
Wouldn't a filter on image_send_to_editor work here? –  t31os Dec 18 '10 at 15:50
    
@t31os - I think that's what I was looking for! Don't know why I didn't see that hook before. –  goldenapples Dec 18 '10 at 16:17
    
Well i certainly hope it helps, it looks like it might do the trick...report back and let us know. :) –  t31os Dec 18 '10 at 16:43
    
@t31os Yup, that did the trick! Thanks! I'll post it as an answer, unless you get to it first. –  goldenapples Dec 18 '10 at 22:01
2  
You go for it mate, i'm not too fussed, happy you were able to find a solution... ;) –  t31os Dec 18 '10 at 22:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.