Disable on page

Hi,

thanks, happy you like it! ??

May I ask you why you would like to disable it on specific pages? I ask because if it is something that does not work well with the plugin, maybe we can fix that instead (regardless of the reason, you are not the first asking for that so I think I will add something that enables the users to disable it for specific pages/posts/etc)? ??

Best,
Florian

Hi Florian,

You are absolutely right, but I just thought it would be a great fit for testing a page first to make sure everything works without lazyloading (or if something breaks on the website) and then switching it on. Or if you don’t want to switch it off for the whole css class or for users unable to make per-page css adjustments, for example. In other words just for extra compatibility ??

I’m also truly amazed how flawlessly everything works comparing to another lazyloading plugin, thank you very much for your work!

Hi,

I’m also truly amazed how flawlessly everything works comparing to another lazyloading plugin, thank you very much for your work!

That’s really great to hear, thank you!

You are absolutely right, but I just thought it would be a great fit for testing a page first to make sure everything works without lazyloading (or if something breaks on the website) and then switching it on. Or if you don’t want to switch it off for the whole css class or for users unable to make per-page css adjustments, for example. In other words just for extra compatibility ??

Yes, I think you are right. With that, the best would be an easy option on the post edit screen to disable it per page/post – maybe a possibility that could be enabled via a central option in the plugin settings, so that a toggle button or something like that is only displayed for all posts/pages/CPTs if the user has a need for it (with Gutenberg, the space for such an option is limited as far as I know, and if multiple installed plugins use that space…).

I will think about it and create a solution for that ??

Best,
Florian

• This reply was modified 6 years ago by Florian Brinkmann.

That sounds excellent! Even easier than adding code to functions.php or templates.

Thanks!

Hi Florian,

Just ran into a situation where I only have a mansory grid from The Grid on page which is doing some weird css things to achieve the desired look. So with lazy loading wrong sizes are calculated making items overlap, but ignoring css classes would disable lazyload on other pages which work fine. So I made a per-page jQuery code:

$('.tg-item-media-holder img').attr('data-no-lazyload','');
$('.tg-item-media-holder img'). addClass('do_not_lazyload');

But images are still lazy loaded:
<img class="tg-item-image do_not_lazyload lazyloaded" alt="" width="500" height="311" src="xxx" data-src="xxx" style="" data-no-lazyload>
Lazyloaded is after do_not_lazyload so it should be added in the right time, but I also tried to move it around.

So right now switching it off for the whole page would help ?? Any suggestions on what to do?

Hey,

have you tried the aspectratio option of the plugin? That should make it work with masonry scripts.

Best,
Florian

Yes! Everything else looks fine, but this particular grid displays images in a weird way

Hm. Could you send me a link to the page so I can have a look?

Of course – https://enhelbeauty.com/o-nas/

Stop lazyloading doesn’t work everywhere, but I just realised visual bug only happens on Safari and on iOS Safari it fixes itself on scroll.

I think the problem is that The Grid makes it’s calculations after images load (like top css), but aspectratio option should make a realistic prediction of the space image would fill.

Thanks. Hm, if the aspectratio option does not help I don’t see a solution for that with the current version (and I cannot reproduce the issue, tried Safari via Browserstack – which version of Safari and OSX are you using?). Is it somehow possible to add a custom class to the images of a grid?

Unfortunately, I won’t have the time to publish an update with the option to disable it for specific pages, but I will try to create one with a filter or something like that.

I’m using latest iOS (up to date) and Mac Safari (12.0.1).

What I thought was to somehow hook into an event when every lazyloading finished for parent container of these images and then run $(‘.wrapper’).imageRatio();

No worries! I can add something like this in the meantime on filter_markup or something else: if ( ! apply_filters( ‘lazyloading_enabled’, true ) ) {

It looks like this:
https://f.ks.gg/K083cT

Just changed Plugin.php to

public function filter_markup( $content ) {
if ( apply_filters( 'lazyload_enabled', false ) ) {
	return $content;
}

And functions.php:

if (is_page(x)) {
	add_filter( 'lazyload_enabled', '__return_false' );
}

Just in case anyone needs as a temporary solution

Thanks for posting it! ??

No problem!

I actually experimented a bit, finding that adjusting grid plugin’s css output with data-no-lazyload worked. But using jQuery did not, even when doing it early. I think I’ll just try out a different grid plugin with built in lazy loading and switch this plugin off for their image class.