Reply To: WordPress 4.4 responsive images

• growdigital

• April 26, 2016 at 5:51 am

@tmconnect thank you for your image field code. I’m new to the responsive images + ACF + WordPress party, so it’s been really useful.

Following the Responsive Images Done Right post, this is what I wanted to achieve:

<img srcset="computer-area-1440x810.jpg 1440w 2x,
             computer-area-720x405.jpg 720w,
             computer-area-480x270.jpg"
     sizes ="(min-width: 45em) 63.1vw",
             100vw"
     src="computer-area-480x270.jpg"
     alt="Computer area">

And this is what I cobbled together, using your code as starting point:

<img srcset="<?php echo $img_srcset; ?>"
     sizes="(min-width: 45em) 63.1vw",
             100vw"
     src="<?php echo $image['sizes']['small']; ?>"
     alt="<?php echo $image['alt']; ?>">

And this is what is output:

<img srcset="http://ysgoltrewen.dev/app/uploads/2016/03/computer-area.jpg 1920w, http://ysgoltrewen.dev/app/uploads/2016/03/computer-area-720x405.jpg 720w, http://ysgoltrewen.dev/app/uploads/2016/03/computer-area-1440x810.jpg 1440w, http://ysgoltrewen.dev/app/uploads/2016/03/computer-area-480x270.jpg 480w"
     sizes="(min-width: 45em) 63.1vw,
            100vw"
     src="http://ysgoltrewen.dev/app/uploads/2016/03/computer-area-480x270.jpg"
     alt="Computer area.">

It kind of seems to work! Sorry for verbosity but wanted to get it out there to see if this is the right path (though I know it’s a simple use-case and that there’s no device-pixel-ratio in the srcset).