Add Snippet To Project
Are you finding that the automatic width and height attributes of your WordPress images are impacting the layout of your website? You’re not alone. WordPress automatically adds these attributes to images when you insert them into a post or page, which can be beneficial for rendering speed but can also interfere with responsive design. No need to worry, though: there’s a simple way to remove these attributes. In this article, we’ll show you the steps you need to follow to cleanly strip out these attributes from your WordPress images.
function wpturbo_remove_image_size_attributes( $html ) {
return preg_replace( '/(width|height)="d*"/', '', $html );
}
add_filter( 'post_thumbnail_html', 'wpturbo_remove_image_size_attributes' );
add_filter( 'image_send_to_editor', 'wpturbo_remove_image_size_attributes' );
The given code snippet comprises a function called wpturbo_remove_image_size_attributes($html). This function serves the role of removing width and height attributes from images in your WordPress posts.
The function utilizes a method known as regular expression (regex) to find and isolate the width and height attributes in your image HTML tag and replace them with nothing (empty strings).
return preg_replace( '/(width|height)="d*"/', '', $html );The regular expression /(width|height)="d*"/ works as follows:
-
The parentheses
()function as grouping. Inside the group are the textswidth|height. The pipe|symbol is an OR operator. The regular expression will target either stringswidthorheight. -
After the equals
=symbol is a pair of quotations"". Inside them, we haved*which is a regex code. Thedsignifies any digit (number) and the*specifies zero or more. Therefore,d*means zero or more digits. So after the equals symbol, it seeks out any instances of numbers.
Next, the function is plugged into two filters: post_thumbnail_html and image_send_to_editor.
add_filter( 'post_thumbnail_html', 'wpturbo_remove_image_size_attributes' );
add_filter( 'image_send_to_editor', 'wpturbo_remove_image_size_attributes' );The first filter, post_thumbnail_html, handles the HTML content for featured images within your posts. By linking our function wpturbo_remove_image_size_attributes to this filter, it will remove width and height attributes from all featured images.
The second filter, image_send_to_editor, applies to images that you insert into your posts through the WordPress editor. By linking our function, it ensures width and height are removed from these images as well.
Ergo, any time an image is displayed via the post thumbnail or inserted via the WordPress editor, our function will run and remove any width or height attributes, ensuring the images are more responsive in different screen sizes.