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

• mathieu

• May 20, 2016 at 4:52 am

Hi Nat,

I was wondering about something on your solution.. The Lazysizes plugin uses data-srcset to lazy load the images. Since wordpress uses normal srcset, the images are not lazyloaded here. I’m using your code with lazysizes, but my network inspector shows all images are loaded at once. The images are responsive, but are not lazyloaded.

Is there a way to fix this? would there be a way to string replace the srcset with data-srcset, or is that a bad thing?

I am using:

    <?php
      $image = get_field('front_page_image');
      $imageID = $image['ID'];
      echo wp_get_attachment_image( $imageID, 'full', false, array( 'class' => 'lazyload image-100p', 'data-sizes' => 'auto' ) );
    ?>

Which outputs in:
<img width="3000" height="1931" src="http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/prent2.jpg" class="image-100p lazyautosizes lazyloaded" alt="prent2" data-sizes="auto" srcset="http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/prent2.jpg 3000w, http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/prent2-300x193.jpg 300w, http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/prent2-768x494.jpg 768w, http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/prent2-1024x659.jpg 1024w, http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/[email protected] 600w, http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/[email protected] 1536w, http://localhost:8888/coeur_catering/wp-content/uploads/2016/05/[email protected] 2048w" sizes="440px">

dont mind the @2x, as i’m using the wp-retina plugin.

thanks!

• betagoo

• October 25, 2016 at 1:56 am

But if You set thumbnail size into wp_get_attachment_image, then WordPress not generate srcset and sizes parametrs.

• jdaquila

• November 4, 2016 at 3:56 am

Hi @mathieu I have the same issue, did you find a solution for that?

• betagoo

• November 4, 2016 at 5:27 pm

This reply has been marked as private.

• donad

• July 19, 2017 at 10:54 pm

hi @mathieu and @jdaquila
same problem for me. Have you solved in some way?