Perhaps wp-lazysizes doesn't work with 4.5

[rgfx]

My gallery is custom. I returned to the original, still no images appear. Almost works, perhaps am doing something wrong. Bummer love lazysizes use it everywhere. Hope you find WP help eventually. Truly appreciate lazysizes, it is the superior solution, thanks.

[TrilipuT]

Yeah, WP 4.5 has native support of scrset. So it could make conflicts. Could you tell what gallery script do you use ?

[joeldbirch]

Good point. (Hope you don't mind me chiming in).

I've been disabling WordPress native responsive images on sites where I use this plugin.

[szepeviktor]

That plugin does add_filter( 'max_srcset_image_width', create_function( '', 'return 1;' ) ); which could be add_filter( 'max_srcset_image_width', function () { return 1; } );

[stroblee]

Hi All,

Am finding problems with WP4.5 too - clean, vanilla install with Woocommerce 2.6:

The srcset is not being replaced by the plugin so contains the same values as the data-srcset

WITHOUT wp-lazysizes plugin the img code is:

<img 
    width="1534" height="1000"  
    class="alignnone size-full wp-image-90"
    src="http://mydevsite/wp-content/uploads/image-1.jpg"
    alt="image-1"
    srcset="
        http://mydevsite/wp-content/uploads/image-1.jpg 1534w, 
        http://mydevsite/wp-content/uploads/image-1-768x501.jpg 768w, 
        http://mydevsite/wp-content/uploads/image-1-1024x668.jpg 1024w, 
        http://mydevsite/wp-content/uploads/image-1-1200x782.jpg 1200w"
    sizes="
        (max-width: 709px) 85vw, 
        (max-width: 909px) 67vw, 
        (max-width: 1362px) 62vw, 
        840px"
>

WITH wp-lazysizes plugin the img code is:

<img   
    width="1534" height="1000" 
    class="alignnone size-full wp-image-90 lazyautosizes lazyloaded" 
    src="http://mydevsite/wp-content/uploads/image-1.jpg"
    data-src="http://mydevsite/wp-content/uploads/image-1.jpg" 
    alt="image-1" 
    srcset="
        http://mydevsite/wp-content/uploads/image-1.jpg 1534w, 
        http://mydevsite/wp-content/uploads/image-1-768x501.jpg 768w, 
        http://mydevsite/wp-content/uploads/image-1-1024x668.jpg 1024w, 
        http://mydevsite/wp-content/uploads/image-1-1200x782.jpg 1200w"
    data-srcset="
        http://mydevsite/wp-content/uploads/image-1.jpg 1534w,
        http://mydevsite/wp-content/uploads/image-1-768x501.jpg 768w, 
        http://mydevsite/wp-content/uploads/image-1-1024x668.jpg 1024w, 
        http://mydevsite/wp-content/uploads/image-1-1200x782.jpg 1200w" 
    data-sizes="auto"
    sizes="765px" 
>

Assuming the plugins uses the modern transparent srcset pattern https://github.com/aFarkas/lazysizes#modern-transparent-srcset-pattern should the generated plugin code really look like this (and the data-src be removed by the plugin?)

<img   
    width="1534" height="1000" 

    class="alignnone size-full wp-image-90 lazyautosizes lazyloaded" 

    src="http://mydevsite/wp-content/uploads/image-1.jpg"

    alt="image-1" 

    srcset="
        http://mydevsite/wp-content/uploads/image-1.jpg 1534w"

    data-srcset="
        http://mydevsite/wp-content/uploads/image-1.jpg 1534w,
        http://mydevsite/wp-content/uploads/image-1-768x501.jpg 768w, 
        http://mydevsite/wp-content/uploads/image-1-1024x668.jpg 1024w, 
        http://mydevsite/wp-content/uploads/image-1-1200x782.jpg 1200w" 

    data-sizes="auto"

    sizes="765px" 
>

Apologies if I'm repeating known issue or if this is is not really a problem and thank you for all the work on this plugin!

[rgfx]

I was able to get things working, by using the disable plugin mentioned above. And turning "load after Onload" on in settings. Images are showing with lazy size classes, only tested locally, however.

[stroblee]

Thanks @rgfx - tried again with the Disable Responsive plugin and it works with one image.

I may not be explaining the issue properly and this maybe similar to what @joeldbirch raised.

Ideally I'd like to use lazysizes WITH Responsive Images enabled and the markup gnerated by wp-lazysizes would be the similar to the modern transparent srcset pattern https://github.com/aFarkas/lazysizes#modern-transparent-srcset-pattern - I think its the most sensible pattern with Wordpress, though happy be to corrected!

There are other attempts to implement this, unfortunately the one below and also others I looked at do not work.: https://florianbrinkmann.de/1122/responsive-images-und-lazy-loading-in-wordpress/ https://github.com/MarcDK/Lazy-Loading-Responsive-Images

Currently when using wp-lazysizes and Responsive Images enabled it "may" work, however the generated markup does not match any lazysizes recommend markup patterns. https://github.com/aFarkas/lazysizes#recommendedpossible-markup-patterns

As I mention above, the markup when both wp-lazysizes and Responsive Images are enabled the data-src is not being removed and the srcset has multiple entries. I'm not sure if either of these is a problem. All responsive examples provided by @aFarkas only have one value for srcset

<img   
    width="1534" height="1000" 
    class="alignnone size-full wp-image-90 lazyautosizes lazyloaded" 
    src="http://mydevsite/wp-content/uploads/image-1.jpg"
    data-src="http://mydevsite/wp-content/uploads/image-1.jpg"
    alt="image-1" 
    srcset="
        http://mydevsite/wp-content/uploads/image-1.jpg 1534w, 
        http://mydevsite/wp-content/uploads/image-1-768x501.jpg 768w, 
        http://mydevsite/wp-content/uploads/image-1-1024x668.jpg 1024w, 
        http://mydevsite/wp-content/uploads/image-1-1200x782.jpg 1200w"
    data-srcset="
        http://mydevsite/wp-content/uploads/image-1.jpg 1534w,
        http://mydevsite/wp-content/uploads/image-1-768x501.jpg 768w, 
        http://mydevsite/wp-content/uploads/image-1-1024x668.jpg 1024w, 
        http://mydevsite/wp-content/uploads/image-1-1200x782.jpg 1200w" 
    data-sizes="auto"
    sizes="765px" 
>

I think my question or current issue with wp-lazysizes is: when Responsive Images is enabled the markup patterns do not match any of the defined markups patterns on https://github.com/aFarkas/lazysizes#recommendedpossible-markup-patterns

I hope this makes more sense and can be correct :)