florianbrinkmann / lazy-loading-responsive-images

WordPress plugin for lazy loading images. Works with responsive images and uses lazysizes.
https://wordpress.org/plugins/lazy-loading-responsive-images/
Other
25 stars 8 forks source link

v6.0.0-rc.1 and AMP plugin collide #40

Closed diegocanal closed 4 years ago

diegocanal commented 4 years ago

Hi Florian,

The issue does not occur in v5.1.2. It happens with both v6.0.0-beta.4 and v6.0.0-rc.1. I am referring to this AMP plugin by AMP Project Contributors formed by Automattic, Google, etc.

The issue introduces a blank image below each one plus I get the error:

Notice: is_amp_endpoint was called incorrectly. is_amp_endpoint() was called before the parse_query hook was called. Please see Debugging in WordPress for more information. (This message was added in version 0.4.2.) in /var/www/vhosts/mydomain.com/webos/wp-includes/functions.php on line 4986

Here you have an example of the HTML code that is output in the amp pages:

<amp-img class="alignnone size-full wp-image-90 amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-layout" src="https://www.mydomain.com/wp-content/uploads/2018/10/file.jpg" alt="" width="1200" height="941" srcset="https://www.mydomain.com/wp-content/uploads/2018/10/file.jpg 1200w, https://www.mydomain.com/wp-content/uploads/2018/10/file-300x235.jpg 300w, https://www.mydomain.com/wp-content/uploads/2018/10/file-1024x803.jpg 1024w, https://www.mydomain.com/wp-content/uploads/2018/10/file-768x602.jpg 768w" layout="intrinsic" i-amphtml-layout="intrinsic" style="--loader-delay-offset:6ms !important;" i-amphtml-auto-lightbox-visited="" lightbox="i-amphtml-auto-lightbox-1" on="tap:amp-lightbox-gallery.activate"><i-amphtml-sizer class="i-amphtml-sizer"><img alt="" role="presentation" aria-hidden="true" class="i-amphtml-intrinsic-sizer" src="data:image/svg+xml;charset=utf-8,<svg height=&quot;941px&quot; width=&quot;1200px&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;/>"></i-amphtml-sizer><noscript><img class="alignnone size-full wp-image-90" src="https://www.mydomain.com/wp-content/uploads/2018/10/file.jpg" alt width="1200" height="941" srcset="https://www.mydomain.com/wp-content/uploads/2018/10/file.jpg 1200w, https://www.mydomain.com/wp-content/uploads/2018/10/file-300x235.jpg 300w, https://www.mydomain.com/wp-content/uploads/2018/10/file-1024x803.jpg 1024w, https://www.mydomain.com/wp-content/uploads/2018/10/file-768x602.jpg 768w" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px"></noscript><img decoding="async" sizes="(max-width: 2556px) 808px, 100vw" alt="" srcset="https://www.mydomain.com/wp-content/uploads/2018/10/file.jpg 1200w, https://www.mydomain.com/wp-content/uploads/2018/10/file-300x235.jpg 300w, https://www.mydomain.com/wp-content/uploads/2018/10/file-1024x803.jpg 1024w, https://www.mydomain.com/wp-content/uploads/2018/10/file-768x602.jpg 768w" src="https://www.mydomain.com/wp-content/uploads/2018/10/file.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>

<amp-img class="alignnone size-full wp-image-90 lazyload amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-layout" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" width="1200" height="941" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 1200w" data-srcset="https://www.mydomain.com/wp-content/uploads/2018/10/file.jpg 1200w, https://www.mydomain.com/wp-content/uploads/2018/10/file-300x235.jpg 300w, https://www.mydomain.com/wp-content/uploads/2018/10/file-1024x803.jpg 1024w, https://www.mydomain.com/wp-content/uploads/2018/10/file-768x602.jpg 768w" data-src="https://www.mydomain.com/wp-content/uploads/2018/10/file.jpg" layout="intrinsic" i-amphtml-layout="intrinsic" style="--loader-delay-offset:7ms !important;" i-amphtml-auto-lightbox-visited="" lightbox="i-amphtml-auto-lightbox-0" on="tap:amp-lightbox-gallery.activate"><i-amphtml-sizer class="i-amphtml-sizer"><img alt="" role="presentation" aria-hidden="true" class="i-amphtml-intrinsic-sizer" src="data:image/svg+xml;charset=utf-8,<svg height=&quot;941px&quot; width=&quot;1200px&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;/>"></i-amphtml-sizer><noscript><img class="alignnone size-full wp-image-90 lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt width="1200" height="941" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 1200w" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px"></noscript><img decoding="async" sizes="(max-width: 2556px) 808px, 100vw" alt="" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 1200w" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-srcset="https://www.mydomain.com/wp-content/uploads/2018/10/file.jpg 1200w, https://www.mydomain.com/wp-content/uploads/2018/10/file-300x235.jpg 300w, https://www.mydomain.com/wp-content/uploads/2018/10/file-1024x803.jpg 1024w, https://www.mydomain.com/wp-content/uploads/2018/10/file-768x602.jpg 768w" data-src="https://www.mydomain.com/wp-content/uploads/2018/10/file.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>

The second one is the blank image.

Best,

florianbrinkmann commented 4 years ago

Hi Diego,

oh, thanks for opening the issue. Will take a look at it.

Best, Florian

florianbrinkmann commented 4 years ago

Hi Diego,

I moved the is_amp_endpoint() check to later hooks. Could you check the RC2 (https://github.com/florianbrinkmann/lazy-loading-responsive-images/releases/tag/v6.0.0-rc.2) and test if that fixes it for you?

Thanks, Florian

diegocanal commented 4 years ago

Hi Florian,

Yes, v6.0.0-rc.2 fixes it for me. Thanks very much!

florianbrinkmann commented 4 years ago

Hi Diego,

great, you’re welcome, thanks for testing it!

Best, Florian