Removing inline img dimensions for responsive WordPress websites

zigzag

Am I available?

Maybe, who knows?
I should, so get in touch over at Contact .

This handy code snippet hooks into WordPress’s image_downsize function and removes the hardcoded img attributes width & height, allowing images to scale with responsive websites:

In your functions.php file…

/**
* 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;
}

And then below the above in your functions.php file add the following to hook it into WordPress’s core:

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

Sourced from:

Comments

2 responses to “Removing inline img dimensions for responsive WordPress websites

  1. Thanks. This is very helpful.

    There is no reason for inline style to be turned on by default anymore. It just makes things harder for developers who build themes. Discovering automatic inline css was something that really frustrated me when I first discovered wordpress. And it still bugs me today.

Leave a Reply

Your email address will not be published. Required fields are marked *

Don't Be Shy