Stop wordpress from hardcoding img width and height attributes
-
10-05-2021 - |
Question
I'm wondering if there's a simple way top stop WordPress automatically hardcoding featured image height and width attributes, other than using regex...
As I'm using a flexible grid for my project (who isn't!) this is causing some funky image issues.
Solution
You can get featured image URL and add it to your content manually, eg:
<?php
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail' );
if ($image) : ?>
<img src="<?php echo $image[0]; ?>" alt="" />
<?php endif; ?>
OTHER TIPS
You can remove the width and height attributes by filtering the output of image_downsize
function found at wp-includes/media.php
. To do this, you write your own function and execute it via your theme's functions.php file or as a plugin.
Example:
Remove the width
and height
attributes.
/**
* This is a modification of image_downsize() function in wp-includes/media.php
* we will remove all the width and height references, therefore the img tag
* will not add width and height attributes to the image sent to the editor.
*
* @param bool false No height and width references.
* @param int $id Attachment ID for image.
* @param array|string $size Optional, default is 'medium'. Size of image, either array or string.
* @return bool|array False on failure, array on success.
*/
function myprefix_image_downsize( $value = false, $id, $size ) {
if ( !wp_attachment_is_image($id) )
return false;
$img_url = wp_get_attachment_url($id);
$is_intermediate = false;
$img_url_basename = wp_basename($img_url);
// try for a new style intermediate size
if ( $intermediate = image_get_intermediate_size($id, $size) ) {
$img_url = str_replace($img_url_basename, $intermediate['file'], $img_url);
$is_intermediate = true;
}
elseif ( $size == 'thumbnail' ) {
// Fall back to the old thumbnail
if ( ($thumb_file = wp_get_attachment_thumb_file($id)) && $info = getimagesize($thumb_file) ) {
$img_url = str_replace($img_url_basename, wp_basename($thumb_file), $img_url);
$is_intermediate = true;
}
}
// We have the actual image size, but might need to further constrain it if content_width is narrower
if ( $img_url) {
return array( $img_url, 0, 0, $is_intermediate );
}
return false;
}
Attach the new function to the image_downsize
hook:
/* Remove the height and width refernces from the image_downsize function.
* We have added a new param, so the priority is 1, as always, and the new
* params are 3.
*/
add_filter( 'image_downsize', 'myprefix_image_downsize', 1, 3 );
Also don't forget to scale the images correctly in your CSS:
/* Image sizes and alignments */
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full {
max-width: 97.5%;
width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}
Hope this helps you.
Cheers,
You can use the post_thumbnail_html
filter to remove the attribute:
function remove_img_attr ($html) {
return preg_replace('/(width|height)="\d+"\s/', "", $html);
}
add_filter( 'post_thumbnail_html', 'remove_img_attr' );
Place this in your functions.php
file
You can overrule inline styles/attributes with !important
:
.wp-post-image {
width: auto !important; /* or probably 100% in case of a grid */
height: auto !important;
}
It's not the cleanest solution, but it solves your problem.
Best solution is to place jquery in footer
jQuery(document).ready(function ($) {
jQuery('img').removeAttr('width').removeAttr('height');
});
CSS solution:
img[class*="align"], img[class*="wp-image-"] {
width: auto;
height: auto;
}
This allows responsive images to work as they should, meanwhile you maintain the width and height attributes in the img element, which is probably better for older browsers, performance and/or to pass HTML validators.
PHP solution:
This will prevent the addition of width/height attributes on any newly-added media in the WP editor (via 'Add Media'). FYI, it may affect your image captions too!
function remove_widthHeight_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}
add_filter( 'post_thumbnail_html', 'remove_widthHeight_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_widthHeight_attribute', 10 );
Here is a simple Javascript solution:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</script>
This can be used to target specific images instead of all images by using a CSS selector, like so:
$('.myspecificclass img').each(function()