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.

6

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

10

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

  • Still works like a charm. – Rahul Aug 31 '17 at 6:04
2

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.

  • 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 '18 at 17:21
2

Best solution is to place jquery in footer

jQuery(document).ready(function ($) {
    jQuery('img').removeAttr('width').removeAttr('height');
});
  • Any explanation about why this is the "best" solution? – Kit Johnson Aug 27 '17 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 '17 at 21:10
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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