Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Slightly smarter filtering to remove hard-coded width and height attributes from *all* images in WordPress (post thumbnails, images inserted into posts, and gravatars). Handy for responsive designs. Add the code below to the functions.php file in your theme's folder (/wp-content/themes/theme-name/ ). Remember to rename the function as needed to …
/**
* Filter out hard-coded width, height attributes on all images in WordPress.
* https://gist.github.com/4557917
*
* This version applies the function as a filter to the_content rather than send_to_editor.
* Changes made by filtering send_to_editor will be lost if you update the image or associated post
* and you will slowly lose your grip on sanity if you don't know to keep an eye out for it.
* the_content applies to the content of a post after it is retrieved from the database and is "theme-safe".
* (i.e., Your changes will not be stored permanently or impact the HTML output in other themes.)
*
* Also, the regex has been updated to catch both double and single quotes, since the output of
* get_avatar is inconsistent with other WP image functions and uses single quotes for attributes.
* [insert hate-stare here]
*
*/
function mytheme_remove_img_dimensions($html) {
$html = preg_replace('/(width|height)=["\']\d*["\']\s?/', "", $html);
return $html;
}
add_filter('post_thumbnail_html', 'mytheme_remove_img_dimensions', 10);
add_filter('the_content', 'mytheme_remove_img_dimensions', 10);
add_filter('get_avatar','mytheme_remove_img_dimensions', 10);
@laacz
laacz commented Jan 17, 2013

I'd rather suggest something like this:

<?php

$tests = [
    '<img src="mzgd.jpg" width="100%" height="100%"/>',
    '<img src="mzgd.jpg" width="100" height="100"/>',
    '<img src="mzgd.jpg" width=\'100%\' height="100%"/>',
    '<img src="mzgd.jpg" width=100 height=100%/>',
    '<img src="mzgd.jpg" width="100%" height=\'100%\'/>',
    '<img src="mzgd.jpg" width="100%" height="100%"/>',
];

function mytheme_remove_img_dimensions($html) {
    // Loop through all <img> tags
    if (preg_match('/<img[^>]+>/ims', $html, $matches)) {
        foreach ($matches as $match) {
            // Replace all occurences of width/height
            $clean = preg_replace('/(width|height)=["\'\d%\s]+/ims', "", $match);
            // Replace with result within html
            $html = str_replace($match, $clean, $html);
        }
    }
    return $html;
}

$expect = '<img src="mzgd.jpg" />';
foreach ($tests as $num => $test) {
    $result = mytheme_remove_img_dimensions($test);
    if ($result != $expect) {
        echo 'Failed test #' . $num . ': ' . $test . "\n";
        echo 'Expected     : ' . $expect . "\n";
        echo 'Actual result: ' . $result . "\n";
        die();
    }
}
@stuntbox
Owner

@laacz Can you explain what advantages the additional loop might have?

@jeremyclarke

Am I right in thinking the code in the main gist will strip widths out of everything, even non-images? Usually you'd want that but it could break some embeds and stuff.

@davekiss

Yeah, this doesn't play nice with the FitVids.js convention

@stuntbox
Owner

@jeremyclarke Yes, this should remove all width and height attributes from all elements (which is what I was aiming for in this case). Can look into modifying the regex to filter only and/or create a conditional, like @laacz has done.

@AlexKovax

@laacz Very nice, thanks!

@AlexKovax

@laacz actually I believe that it will work better using "preg_match_all" instead of "preg_match" to get all the occurences. Otherwise you will actually get only the first image of the content. That's at least what I got in my tests. I now use the function like this :

function remove_thumbnail_dimensions($html) {
    // Loop through all <img> tags
    if (preg_match_all('/<img[^>]+>/ims', $html, $matches)) {
        foreach ($matches as $match) {
            // Replace all occurences of width/height
            $clean = preg_replace('/(width|height)=["\'\d%\s]+/ims', "", $match);
            // Replace with result within html
            $html = str_replace($match, $clean, $html);
            error_log($match);
        }
    }
    return $html;
}
@parkersweb

@stuntbox is there a reason you've added the hook at the_content, rather than 'image_send_to_editor'? Is it purely for backward compatibility with existing posts?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.