stefanledin on "[Plugin: Responsify WP] Selecting Image Size"

Wow, that worked! Those images now lazyload. Thanks!

I looked at the srcset data in chrome and it's different from what i was expecting, so i just wanted to confirm the custom sizes i entered are being outputted correctly?

The following code based on your modification is what i'm using:

<a href="<?php echo get_permalink( $post->ID );?>">
<?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$attributes = rwp_attributes( $thumbnail_id, array( 'element' => 'img', 'sizes' => array('Desktop-Related-Posts', 'Desktop-Related-Posts@2x', 'Laptop-Related-Posts', 'Laptop-Related-Posts@2x', 'Tablet-Landscape-Related-Posts', 'Tablet-Landscape-Related-Posts@2x', 'Tablet-Portrait-Related-Posts', 'Tablet-Portrait-Related-Posts@2x', 'Smartphone-Large-Landscape-Related-Posts', 'Smartphone-Large-Landscape-Related-Posts@2x', 'Smartphone-Small-Landscape-Related-Posts', 'Smartphone-Small-Landscape-Related-Posts@2x', 'Smartphone-Large-Portrait-Related-Posts', 'Smartphone-Large-Portrait-Related-Posts@2x', 'Smartphone-Small-Portrait-Related-Posts', 'Smartphone-Small-Portrait-Related-Posts@2x' ), 'attributes' => array( 'sizes' => '(min-width: 1405px) 212px, (min-width: 1100px) 185px, (min-width: 981px) 202px, (min-width: 768px) 308px, (min-width: 667px) 263px, (min-width: 480px) 218px, (min-width: 375px) 282px, 233px' )
));
echo '<img data-srcset="'.$attributes['srcset'].'" sizes="'.$attributes['sizes'].'">';
?>
</a>

This outputs the following srcset when i inspect an image in chrome:

<img data-srcset="http://localhost/wordpress/wp-content/uploads/2016/07/3-185x125.jpg 185w, http://localhost/wordpress/wp-content/uploads/2016/07/3-202x136.jpg 202w, http://localhost/wordpress/wp-content/uploads/2016/07/3-212x143.jpg 212w, http://localhost/wordpress/wp-content/uploads/2016/07/3-218x147.jpg 218w, http://localhost/wordpress/wp-content/uploads/2016/07/3-233x157.jpg 233w, http://localhost/wordpress/wp-content/uploads/2016/07/3-263x177.jpg 263w, http://localhost/wordpress/wp-content/uploads/2016/07/3-282x190.jpg 282w, http://localhost/wordpress/wp-content/uploads/2016/07/3-308x208.jpg 308w, http://localhost/wordpress/wp-content/uploads/2016/07/3-370x250.jpg 370w, http://localhost/wordpress/wp-content/uploads/2016/07/3-404x272.jpg 404w, http://localhost/wordpress/wp-content/uploads/2016/07/3-424x286.jpg 424w, http://localhost/wordpress/wp-content/uploads/2016/07/3-436x294.jpg 436w, http://localhost/wordpress/wp-content/uploads/2016/07/3-466x314.jpg 466w, http://localhost/wordpress/wp-content/uploads/2016/07/3-526x354.jpg 526w, http://localhost/wordpress/wp-content/uploads/2016/07/3-564x380.jpg 564w, http://localhost/wordpress/wp-content/uploads/2016/07/3-616x416.jpg 616w" sizes="(min-width: 564px) 616px, (min-width: 526px) 564px, (min-width: 466px) 526px, (min-width: 436px) 466px, (min-width: 424px) 436px, (min-width: 404px) 424px, (min-width: 370px) 404px, (min-width: 308px) 370px, (min-width: 282px) 308px, (min-width: 263px) 282px, (min-width: 233px) 263px, (min-width: 218px) 233px, (min-width: 212px) 218px, (min-width: 202px) 212px, (min-width: 185px) 202px, 185px" src="http://localhost/wordpress/wp-content/uploads/2016/07/3-466x314.jpg" class="lazy-loaded">

This is the part that i'm unsure of:

sizes="(min-width: 564px) 616px, (min-width: 526px) 564px, (min-width: 466px) 526px, (min-width: 436px) 466px, (min-width: 424px) 436px, (min-width: 404px) 424px, (min-width: 370px) 404px, (min-width: 308px) 370px, (min-width: 282px) 308px, (min-width: 263px) 282px, (min-width: 233px) 263px, (min-width: 218px) 233px, (min-width: 212px) 218px, (min-width: 202px) 212px, (min-width: 185px) 202px, 185px" src="http://localhost/wordpress/wp-content/uploads/2016/07/3-466x314.jpg" class="lazy-loaded">

When i had the previous code in place where lazy load didn't work, my srcset was:

sizes="(min-width: 1405px) 212px, (min-width: 1100px) 185px, (min-width: 981px) 202px, (min-width: 768px) 308px, (min-width: 667px) 263px, (min-width: 480px) 218px, (min-width: 375px) 282px, 233px">

or in full

<img srcset="http://localhost/wordpress/wp-content/uploads/2016/07/4-185x125.jpg 185w, http://localhost/wordpress/wp-content/uploads/2016/07/4-202x136.jpg 202w, http://localhost/wordpress/wp-content/uploads/2016/07/4-212x143.jpg 212w, http://localhost/wordpress/wp-content/uploads/2016/07/4-218x147.jpg 218w, http://localhost/wordpress/wp-content/uploads/2016/07/4-233x157.jpg 233w, http://localhost/wordpress/wp-content/uploads/2016/07/4-263x177.jpg 263w, http://localhost/wordpress/wp-content/uploads/2016/07/4-282x190.jpg 282w, http://localhost/wordpress/wp-content/uploads/2016/07/4-308x208.jpg 308w, http://localhost/wordpress/wp-content/uploads/2016/07/4-370x250.jpg 370w, http://localhost/wordpress/wp-content/uploads/2016/07/4-404x272.jpg 404w, http://localhost/wordpress/wp-content/uploads/2016/07/4-424x286.jpg 424w, http://localhost/wordpress/wp-content/uploads/2016/07/4-436x294.jpg 436w, http://localhost/wordpress/wp-content/uploads/2016/07/4-466x314.jpg 466w, http://localhost/wordpress/wp-content/uploads/2016/07/4-526x354.jpg 526w, http://localhost/wordpress/wp-content/uploads/2016/07/4-564x380.jpg 564w, http://localhost/wordpress/wp-content/uploads/2016/07/4-616x416.jpg 616w" sizes="(min-width: 1405px) 212px, (min-width: 1100px) 185px, (min-width: 981px) 202px, (min-width: 768px) 308px, (min-width: 667px) 263px, (min-width: 480px) 218px, (min-width: 375px) 282px, 233px">

With the newly modified code the min-width sizes look different from what i was expecting them to be based on the old code output. Does the new srcset look correct to you based on its previous output with the old code?