Has this plugin been abandoned?
]]>This plugin?hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Is there a filter or call I can use to prevent the feature image in a post from being lazy loaded?
Currently, I am displaying the feature image at the top of a post by using the_post_thumbnail();
]]>In order to not duplicate scripts on my end…
Looking at the plugin code seems to be just: “lazysizes”..
Hi. Thanks for the great plugin.
The problem your plugin has with cache plugins is that when js files are merged, “use strict”; Causes an error. Some plugins use variables without declaration. Please fix this problem in future updates.
Thanks
]]>So setting data-sizes=”auto” doesn’t seem to help…
I’m using this structure. And also set the plugin to lazyload custom fields which is working.
<picture>
<?php $xoriginalximage2xretina = wp_get_attachment_image_src(get_sub_field('imagen_de_fondo'), 'original'); ?>
<?php $xoriginalximage1xretina = wp_get_attachment_image_src(get_sub_field('imagen_de_fondo'), 'original'); ?>
<?php $xmediumximage2xretina = wp_get_attachment_image_src(get_sub_field('imagen_de_fondo'), 'medium_large'); ?>
<?php $xmediumximage1xretina = wp_get_attachment_image_src(get_sub_field('imagen_de_fondo'), 'medium'); ?>
<source media="(max-width: 768px)" data-srcset="<?php echo $xmediumximage1xretina[0]; ?> 1x, <?php echo $xmediumximage2xretina[0]; ?> 2x">
<source media="(max-width: 1000px)" data-srcset="<?php echo $xlargeximage1xretina[0]; ?> 1x, <?php echo $xlargeximage2xretina[0]; ?> 2x">
<img height="500px" class="thumbnail img-fluid imagen-fondo lazyload" data-srcset="<?php echo $xoriginalximage2xretina[0]; ?>" alt="<?php the_title(); ?>">
</picture> Edit the problem could be related to these other images
<picture>
<?php $image2xretina = wp_get_attachment_image_src(get_sub_field('imagen'), 'medium_large'); ?>
<!--<?php $image1xretina = wp_get_attachment_image_src(get_sub_field('imagen'), 'medium_large'); ?>
<source data-srcset="<?php echo $image2xretina[0]; ?>" media="(min-height: 1600px)">
<source data-srcset="<?php echo $image1xretina[0]; ?> 1x, <?php echo $image2xretina[0]; ?> 2x">-->
<img class="img-fluid thumbnail custom-img-fluid lazyload" srcset="<?php echo $image2xretina[0]; ?>">
</picture>So basically the question is how to use wp_get_attachment_image with support for retina sizes (say add them in the scrset), right now some of my web images looks blurry. Tried this plugin https://www.ads-software.com/plugins/wp-retina-2x/ didn’t work.
So I’m using this
<?php echo wp_get_attachment_image( 191, array('761.917', '624'),false, array('alt' => 'Title goes here', 'class' => 'imagen-servicios mb-5-custom') ); ?>
And also
<?php echo get_lazysizes_html( wp_get_attachment_image( 191, array('761.917', '624'),false, array('alt' => 'Title goes here', 'class' => 'imagen-servicios mb-5-custom') )); ?>
Which uses the Lazysizes plugin
https://www.ads-software.com/plugins/lazysizes/
Example of srcset using retina suntaxis:
srcset="image.jpeg 1x, image.jpeg 2x"
Hi Patrick
First off thank you for making this plugin available. I’ve been looking all over for a WP lazyloading plugin which also generates placeholders since I’m finding that the lazy loading UX can otherwise be too disruptive.
And when your plugin works it does so really well. Unfortunately it doesn’t work for most of the page templates in my custom built theme, despite enabling wp_get_attachment_image support and ACF support. Per your FAQ that leaves passing the html to get_lazysizes_html, which as a non-dev I have no idea how to do.
Another plugin I came across which does have an option that works with my theme is Florian Brinkmann’s Lazy Loader: https://www.ads-software.com/plugins/lazy-loading-responsive-images/
Unfortunately the plugin doesn’t offer any placeholder option, which is why I am still looking for a replacement.
But the option that it does have and which gets it to work with my theme is to “Process the complete markup”. He describes that option as follows:
Instead of just modifying specific parts of the page (for example, the post content, post thumbnail), the complete generated markup is processed. With that, all images (and other media, if you enabled it) will be lazy loaded. Because the plugin needs to process more markup with that option enabled, it might slow down the page generation time a bit. If your page contains HTML errors, like unclosed tags, this might lead to unwanted behavior, because the DOM parser used by Lazy Loader tries to correct that.
Is that potentially something you think might make sense to consider as an option for your plugin?
]]>Hi Patrick!
Long time no see ?? Your plugin worked great so far, but today I noticed, that all lazyloaded images are invisible – but that’s only happening on my old iPad (on Safari Mobile 9.0). But it worked before, so the problem probably came with one of the last updates of your plugin.
Btw in all other browsers and devices it all works as planned. If I can help you with finding the problem, just tell me what to do ??
Have great day!
]]>Hi Patrick, I just updated the plugin to v1.3.1 to try to resolve an issue with a different plugin. Now I am getting a fatal error:
Fatal error: Uncaught Error: Class 'Lazysizes\PluginCore' not found in /var/www/html/wp-content/plugins/lazysizes/lazysizes.php:28 Stack trace: #0 /var/www/html/wp-admin/includes/plugin.php(2141): include() #1 /var/www/html/wp-admin/plugins.php(175): plugin_sandbox_scrape('lazysizes/lazys...') #2 {main} thrown in /var/www/html/wp-content/plugins/lazysizes/lazysizes.php on line 28
I am on WP 5.2.2 and PHP 7.1.32. Let me know if there’s anything else you need from me. Thanks!
]]>With lazysizes enabled, I’m getting the following PHP error being displayed. This is replicatable from WordPress 4.9.x running PHP 7.2 and also on the current WordPress 5.4.2 running php 7.4.7
I have redacted the web dir path but the error is as follows. Let me know if you need any more detail.
When lazysizes is disabled, then this error message does not appear.
I am using the latest version lazysizes 1.2.1 however I also got it with version 1.1.0
Warning: preg_replace(): Unknown modifier '/' in [redacted web dir]/wp-content/plugins/lazysizes/inc/Lazysizes/class-pregreplace.php on line 329
Call Stack
# Time Memory Function Location
1 0.0001 367160 {main}( ) .../index.php:0
2 0.0001 367440 require( '[redacted web dir]/wp-blog-header.php' ) .../index.php:17
3 0.7395 24524136 require_once( '[redacted web dir]/wp-includes/template-loader.php' ) .../wp-blog-header.php:19
4 0.7444 24561544 include( '[redacted web dir]/wp-content/themes/[redacted theme name]/page-new.php' ) .../template-loader.php:106
5 1.9940 25895160 get_template_part( ) .../page-new.php:19
6 1.9940 25895680 locate_template( ) .../general-template.php:168
7 1.9940 25895792 load_template( ) .../template.php:672
8 1.9941 25896048 require( '[redacted web dir]/wp-content/themes/[redacted theme name]/content-page.php' ) .../template.php:725
9 1.9944 25896048 the_content( ) .../content-page.php:3
10 1.9946 25896048 apply_filters( ) .../post-template.php:253
11 1.9946 25896456 WP_Hook->apply_filters( ) .../plugin.php:206
12 2.7277 47488680 Lazysizes\PluginCore->filter_html( ) .../class-wp-hook.php:287
13 2.7277 47488680 Lazysizes\PregReplace->preg_replace_html( ) .../class-plugincore.php:298
14 2.7277 47488680 Lazysizes\PregReplace->replace_generic_tag( ) .../class-pregreplace.php:66
15 2.7281 47515888 Lazysizes\PregReplace->get_replace_markup( ) .../class-pregreplace.php:173
16 2.7281 47516424 Lazysizes\PregReplace->add_lazyload_class( ) .../class-pregreplace.php:199
17 2.7281 47516776 preg_replace ( ) .../class-pregreplace.php:329Hello, I found this plugin through a bunch of googling while trying to rectify an issue. Right now my site is designed in a way that my main gallery has to sit inside a column with a hidden overflow scrolling style, but enabling lazy load with the elementor gallery does not work with this and the images below the initial visibility do not load.
Is there any resource or tutorial available with using this plugin + advanced custom fields? I’m afraid this type of thing is far out of my element, any help at all is greatly appreciated.
]]>Right now all options appear as disabled, maybe it could use some recommended by default since it won’t do anything without any active options. And there are others I don’t know about.
]]>It has a conflict with envira gallery images, which are shown below the gallery.
]]>Also it seems that loading in the background next images in the latest lazysizes is done without a plugin, maybe I’m wrong here perhaps, but used directly the latest script in some hardcoded code.
]]>So i have installed the following plugin:
https://www.ads-software.com/support/plugin/advanced-bootstrap-carousel/
Which is based on a bootstrap slider. Tried lazysizes but it doesn’t lazyload the images inside the carousel.
I have a html iframe embed on my WordPress site with a Vimeo link. I also have a fallback image. However the still image only shows for a second, before getting a black screen, while the video loads. Is this something I could prevent using this plugin, I have it installed but am not noticing a difference.
]]>Can this plugin fix the “Defer offscreen images” message on Google pagespeed?
I need to add if I have “wp fastest cache”? or I need other plugin?
Hi,
I have a block of images that are laid out using masonry. Between each group of lazy loaded images, a big gap appears. If masonry is triggered again after all images are loaded (like if you resize your window) then everything goes back to normal, but the initial layout is broken.
I suspect this is linked to image dimensions (and / or aspect ratio) not being properly calculated before they are actually loaded (and the other issue titled “Images overlapping in mansory” might be related as well).
Do you make use of the “lazysizes aspectratio extension” in your plugin, which supposedly helps with that?
it seems that it doesn’t work for a image elements which is written in custom fields(textarea an wysiwyg editor). Is there any solution for it?
]]>Hi there,
I’ve installed plugin Lazysizes 1.1.0 in my WP-site. I’m trying to get the content of a iframe lazy loaded. Unfortunately it’s not working. This is the source code in the html page of my site:
<iframe data-src=”https://sanneterpstra.com/mmbs/proef.html” style=”height:800px; width:100%; border:1px solid #000;” class=”lazyloaded”></iframe>
And this is the source code of the page within the iframe:
<body>
</body>
What do I do wrong?
Note: when I delete ‘src’ and only ‘data-src’ remains, then its lazyloading, but then I can’t see the image in my browser (Chrome 77).
Thanks, Henriette.
]]>Hi,
In masonry layout, images are overlapping.
can you please check it.
]]>Hi,
I have just upgraded to version 1.1.0. The images on the website are no longer being displayed. The console is displaying the following errors in Chrome 74.0.3729.169:
Uncaught ReferenceError: lazySizesConfig is not defined
at k (ls.bgset.min.js:2)
at ls.bgset.min.js:2
at triggerEvent (lazysizes.js?ver=5.0.0:83)
at lazysizes.js?ver=5.0.0:464
at lazysizes.js?ver=5.0.0:162
at Function.run [as _lsFlush] (lazysizes.js?ver=5.0.0:129)
at Object._ (lazysizes.js?ver=5.0.0:629)
at init (lazysizes.js?ver=5.0.0:708)
at lazysizes.js?ver=5.0.0:281
Uncaught ReferenceError: lazySizesConfig is not defined
at k (ls.bgset.min.js:2)
at ls.bgset.min.js:2
at triggerEvent (lazysizes.js?ver=5.0.0:83)
at lazysizes.js?ver=5.0.0:464
at lazysizes.js?ver=5.0.0:162
at run (lazysizes.js?ver=5.0.0:129)
Uncaught TypeError: Cannot read property ‘(max-width: 900px)’ of undefined
at ls.bgset.min.js:2
at Array.forEach (<anonymous>)
at k (ls.bgset.min.js:2)
at ls.bgset.min.js:2
at triggerEvent (lazysizes.js?ver=5.0.0:83)
at lazysizes.js?ver=5.0.0:464
at lazysizes.js?ver=5.0.0:162
at run (lazysizes.js?ver=5.0.0:129)
Any help would be most appreciated.
Thanks,
Claire
I’ve found what I think may be an issue in the plugin. I’ve got some code on my frontend to render templates, which calls get_lazysizes_html() and normally works just fine. However, when I have the same templates set up to load through an ajax call using WordPress’s standard admin-ajax.php, I get a fatal PHP error like this:
PHP Fatal error: Uncaught Error: Call to a member function preg_replace_html() on null in /<filepath>/class-lazysizes.php:279
I found that the global $lazysizes object is not being initialized correctly because is_admin() is returning true when calling get_lazysizes_html() via admin-ajax.php, even though the code is being used to render a template on the frontend. This is happening on line 49 in class-lazysizes.php:
if ( is_admin() ) {
If I change this to the following, it works:
if ( is_admin() && ! wp_doing_ajax() ) {
Would it make sense for you to change this in the plugin, or is there a workaround I’m missing?
]]>Hi
I’m seeing a php warning
Warning: preg_match(): Unknown modifier '>' in /home/survivorsnetwork/public_html/wp-content/plugins/lazysizes/class-lazysizespregreplace.php on line 168
This is on the default calendar page created by The Events Calendar plugin. So far I have not seen the on any other pages.
Is there anything I can do about it?
]]>hi,
i add the markup “get_lazysizes_html” but it still not working any fix.
]]>Before of all I would to say thank you for the best lazy load plugin.
But google schema validator founded a few errors in schema.org. I guess that in the tag “span” is unwanted parameter itemprop=”image” becouse it already is in the tag “img”.
always indebted.
I used lazysizes.js from CDN to load advertisements and widgets before using this plugin.
Although this plug-in is optimal for delayed loading such as images in articles, it conflicts with lazysizes.js etc that you installed yourself, so if you have the option that the plugin does not add script, it is personally nice.
]]>Hi, This is the only lazy load plugin I have tried that doesn’t lazy load my images.
I read the faq, but i’m not sure how to modify that with my theme.
I need a lazy load plugin that works with the picture element, as all the others except for one, do not support this element.
I am having trouble with the Extra/Divi theme by Elegant Themes. Do you know how to make your plugin compatible with this theme?
I have found references to wp_get_attachment_image in several places in my theme.
How do you recommend changing it to get_lazysizes_html( wp_get_attachment_image($id) as you suggest?
Is there any reason this plugin doesn’t natively support wp_get_attachment_image?
Like I said, this is the only lazy load plugin (and i tried them all) that didn’t work on my images.
So it seems like this will limit the audience and uptake of this plugin, as many people will try it, see it doesn’t work, and then delete it.
Which is a shame as if it does the same thing as the lazysizes plugin on github, then this is one of the best lazy load plugins available.
Please make it more compatible so more people can benefit from it.
Thanks
]]>Hi, would it be possible to integrate this lazysizes inside tinymce, instead of parsing content during each load. I think that would increase TTFB.
So when you add images tinymce automatically adds required tags, and while in preview Visual mode would display data-src as src, but before save would replace src with that base64 1px img.
As well that would help avoiding regex. And for the content I think cli would be better or some cronjob, which would in the background scan for images and other tags which do not already have lazyload class and would update it and replace it with updated html.
]]>Img has no self closing tag so some regexes which are checking on that do no work and do no add some additional data.
]]>