17

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.

8 Answers 8

8

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; ?> 
2
  • only works for hard coded wordpress pages, which is useless for a CMS.
    – S..
    Jun 29, 2013 at 19:06
  • Keep in mind: This method prevents responsive images since WP 4.4 because it doesn't includes the srcset attribute. Feb 5, 2016 at 7:33
14

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,

1
14

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

2
  • Still works like a charm.
    – Rahul
    Aug 31, 2017 at 6:04
  • This is the best answer i've found Mar 2, 2022 at 9:30
6

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.

2
  • 1
    For some reason the class wp-post-image wasn't included in my images. Instead I had something like wp-image-26. I had to use another selector but the idea worked.
    – Pier
    May 16, 2018 at 17:21
  • Indeed @Pier, use the @marsandback answer below, particularly with the includes attribute selector, img[class*="wp-image-"]. No need for !important! Mar 29, 2021 at 20:47
3

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 );
1
  • THIS is the best solution for Wordpress, because it fixes too large pictures within a table in the editor, preventing you from scrolling horizontally. Apply it to front and admin area!
    – scavenger
    Mar 23 at 19:06
2

Best solution is to place jquery in footer

jQuery(document).ready(function ($) {
    jQuery('img').removeAttr('width').removeAttr('height');
});
2
  • 1
    Any explanation about why this is the "best" solution? Aug 27, 2017 at 4:09
  • 1
    because sometimes "add_filter" don't work where you want it to be that's why I said
    – Asad Ali
    Sep 3, 2017 at 21:10
1

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 );
2
  • Just wondering - is there a reason for filtering on the context? Dec 9, 2023 at 17:17
  • 1
    @JamesSnell of course, well, it depends on the context... ;-) Dec 19, 2023 at 12:07
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.