Stop wordpress from hardcoding img width and height attributes

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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; ?>

Method 2

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,

Method 3

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

Method 4

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.

Method 5

Best solution is to place jquery in footer

jQuery(document).ready(function ($) {
    jQuery('img').removeAttr('width').removeAttr('height');
});

Method 6

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

Method 7

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

Method 8

Add this piece of code: (Applies to new Gutenberg editor too)

function disable_add_img_width_height( $value, $image, $context, $attachment_id ) {
    if ($context === 'the_content' || $context === 'the_excerpt' ||  $context === 'widget_text_content')
        return false;
    return $value;
}
add_filter( 'wp_img_tag_add_width_and_height_attr', 'disable_add_img_width_height', 10, 4 );

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0