Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

4 Answers

up vote 1 down vote accepted

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; ?> 
share|improve this answer
    
Hi Vilius - of course, I think I've even done this before! Nice solution, works great. Many thanks. –  Richard Sweeney Sep 30 '11 at 9:07
2  
Not sure I like this solution as is - it has no alt tag. See below for the best solution. –  user319940 Dec 7 '12 at 14:48
    
only works for hard coded wordpress pages, which is useless for a CMS. –  Sam Jun 29 '13 at 19:06
add comment

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,

share|improve this answer
    
thanks for this solution. Nice and robust! I'll use this in a future project. –  Richard Sweeney Sep 30 '11 at 9:20
    
Just thought I'd say thanks for this - great solution that I'll use on future projects :D. –  user319940 Dec 7 '12 at 14:47
    
This doesn't work for me, using 3.5 –  Sam Jun 29 '13 at 19:25
add comment

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

share|improve this answer
add comment

There's a much easier way to determine the size of the featured image to be displayed now using the built-in hooks right in your template file (index.php or something similar):

the_post_thumbnail();                  // without parameter -> Thumbnail

the_post_thumbnail('thumbnail');       // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large');           // Large resolution (default 640px x 640px max)
the_post_thumbnail('full');            // Original image resolution (unmodified)

the_post_thumbnail( array(100,100) );  // Other resolutions

Hope that helps.

share|improve this answer
1  
I am not sure this addresses the question. The question is asking how to stop the addition of height and width attributes not how to get particular sizes of images. –  s_ha_dum Feb 6 '13 at 0:22
    
@s_ha_dum is right. This doesn't answer the question at all –  Yi Jiang Sep 26 '13 at 5:16
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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