Skip to content

Instantly share code, notes, and snippets.

@stuntbox
Last active March 23, 2023 03:32
Show Gist options
  • Star 61 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save stuntbox/4557917 to your computer and use it in GitHub Desktop.
Save stuntbox/4557917 to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link
Author

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

@jerclarke
Copy link

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
Copy link

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

@stuntbox
Copy link
Author

@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
Copy link

@laacz Very nice, thanks!

@AlexKovax
Copy link

@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
Copy link

@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