36

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?

Improve this question
6
  • 1
    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, 2011 at 22:46
  • 2
    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, 2011 at 12:43
  • 1
    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, 2011 at 12:50
  • 1
    @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, 2011 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, 2012 at 17:11

4 Answers 4

Reset to default
35

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.

Improve this answer
4
  • 1
    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, 2012 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, 2012 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, 2012 at 23:43
  • 2
    Warning: This answer breaks image captions in WordPress 3.5.1.
    – wired
    Apr 24, 2013 at 23:41
5

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;
}
Improve this answer
2
  • 5
    Careful, though. Filtering the_content will also filter youtube videos and any other width/height attribute.
    – MikeNGarrett
    Jan 5, 2011 at 21:59
  • 1
    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, 2012 at 13:50
1

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;
}
Improve this answer
0

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.

Improve this answer
5
  • 1
    Wouldn't a filter on image_send_to_editor work here?
    – t31os
    Dec 18, 2010 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, 2010 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, 2010 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, 2010 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, 2010 at 22:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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