Reply To: WordPress 4.4 responsive images

• 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!