WordPress has responsive images built in these days. Since 4.4 as a matter of fact. But what if we want to have WordPress Responsive images with width based on actual image width?
Current State and Needs
Can we generate something like WordPress responsive image (comments added to html):
<img width="1024" height="445" src="https://example.com/app/uploads/2016/04/name.jpg" // old browser support using src class="d-block w-100" alt="" srcset="https://example.com/app/uploads/2016/04/name.jpg 1024w, // 1024 width image https://example.com/app/uploads/2016/04/name-300x130.jpg 300w, // 300px width image https://example.com/app/uploads/2016/04/name-768x334.jpg 768w" / /768px width image sizes="(max-width: 1024px) 100vw, 1024px">
where the 1024px can be based on the actual width of the image? That was the question we had and so we started looking around.
Somehow we had quite a few images that were smaller than 1024px on our site and these now got stretched as they are not 1024px wide.
As WordPress sees that the full image is 1024px by 445px that is what is uses to generate the images and though this works well it does not work for all. Looking for solution as suggested by Mark Root-Wiley like:
<img src="example.gif", srcset="example.gif 200w" sizes="(min-width: 400px) 400px, 100vw" width="200" /* <=== TA-DA! */ class="logo">
This would be a possible solution if the width was not static and the $attr variable would not overwrite the image attributes. Still we looked further.
Well, WordPress did suggest a solution for custom sizes:
<?php $img_src = wp_get_attachment_image_url( $attachment_id, 'medium' ); $img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' ); ?> <img src="<?php echo esc_url( $img_src ); ?>" srcset="<?php echo esc_attr( $img_srcset ); ?>" sizes="(max-width: 50em) 87vw, 680px" alt="A rad wolf">
But that still did not load a width based on actual image width. And that set the srcset image to a another image size which we didn’t really need. Full width was fine for us.
WordPress Image Width
We could use
$image_data = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "thumbnail" ); ?>
to grab the image meta data and then the width using:
$image_width = $image_data;
NB Great Explanation by Jonathan here
Custom Responsive Image with Actual Width
So something like:
<?php $alt_text = get_post_meta($post->ID, '_wp_attachment_image_alt', true); $image_data = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "thumbnail" ); $image_width = $image_data; $img_src = wp_get_attachment_image_url( $attachment_id, 'full' ); $img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'full' ); ?> <img src="<?php echo esc_url( $img_src ); ?>" srcset="<?php echo esc_attr( $img_srcset ); ?>" sizes="(max-width:<?php $echo image_width;?>) 100vw,<?php$ echo image_width;?>" alt="<?php echo $alt_text;?>">
NB Not tested yet!
should do the trick. This would allow a fully customized loading of the image with the actual width loaded instead of the full image width as set in the theme.
To be continued…