Last active
March 23, 2023 03:32
-
-
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 …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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); |
@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.
@laacz Very nice, thanks!
@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;
}
@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
Yeah, this doesn't play nice with the FitVids.js convention