public
Last active

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 match your theme name so you can avoid any namespace issues. Based on: http://css-tricks.com/snippets/wordpress/remove-width-and-height-attributes-from-inserted-images/ And: http://css-tricks.com/snippets/wordpress/remove-width-and-height-attributes-from-inserted-images/

  • Download Gist
gistfile1.php
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
/**
* 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);

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

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

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.

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

@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.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.