Filter to remove image dimension attributes?

2 Views

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:

Read More
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?

Post Views: 2

Related posts

Leave a Reply

4 comments

  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.

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

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

  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.