Filter to remove image dimension attributes?

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

Method 2

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;
}

Method 3

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;
}

Method 4

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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0