Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Exclude images from lazyload not working for essentials grid. #252

Closed
Chris2011 opened this issue May 13, 2019 · 9 comments

Comments

Projects
None yet
2 participants
@Chris2011
Copy link

commented May 13, 2019

When I want to exclude images, that are parts of the essentials grid, which is implemented in my page, it will not work. I added a lot of classes from wrapper elements from the essentials grid to exclude but nothing works. Unfortunately, the images inside of the wrapper, don't have classes to exlucde. I guess that only classes on img tags are working, right?

I need to add classes from wrapper elements like .esg-wrapper-smth to exlude those elements. To get the image names is not possible, because they are normal images, uploaded from the mediathek and don't have special name pattern.

My environment: WordPress 5.1.1 and Autoptimize 2.5.0

@futtta

This comment has been minimized.

Copy link
Owner

commented May 13, 2019

can you share the URL where you have essential grid active Chris?

@Chris2011

This comment has been minimized.

Copy link
Author

commented May 13, 2019

Atm not really, I will make a test environment for that and will come back to you.

@Chris2011

This comment has been minimized.

Copy link
Author

commented May 13, 2019

@futtta here it is: https://grid.54p.de/sample-page/ the grey block are 10 images in a grid. As you can see, it will not loaded, because lazy loading (in general) is not working with essentials grid. I tested a lot of other plugins but this is not the initial problem.

I added those classes for example to exclude those elements (Better the whole grid with images): .tp-esg-item, .esg-entry-media but the images still not loaded. Img tags still has the lazyload class.

@futtta

This comment has been minimized.

Copy link
Owner

commented May 14, 2019

OK so excluding based on the class/ id of a div higher up in the DOM indeed is not possible (I would require AO to have deeper understanding the DOM, which I prefer not to because of perf.) so the normal exclusions won't work

I have however made a change in the lazyload logic and specifically in the should_lazyload filter that allows you to disable lazyload (for an entire page) based on the context (the HTML of that page) with a code snippet like this one;

add_filter('autoptimize_filter_imgopt_should_lazyload','should_lazyload_context',10,2);
function should_lazyload_context($flag, $context) {
  if ( strpos( $context ,'esg-grid') !== false ) {
	return false;
  } else {
	return $flag;
  }
}```

Maybe not as easy as the normal lazyload exclusions, but at least now you can use AO lazyload without breaking your essential grid ;-)
@Chris2011

This comment has been minimized.

Copy link
Author

commented May 14, 2019

Ahh ok cool, so I can use it on that page, but exclude the HTML that I don't want to lazyload but the rest, which is not an esg-grid, is working, right?

@futtta

This comment has been minimized.

Copy link
Owner

commented May 14, 2019

@Chris2011

This comment has been minimized.

Copy link
Author

commented May 14, 2019

Hm ok, that's a workaround but what a shame, because I want to use this on the same page except for that grid.

Is it really a perf problem to say: "hey, you want to exclude this class ".esg-grid" so all images inside of this DOM element, will excluded"?

@futtta

This comment has been minimized.

Copy link
Owner

commented May 14, 2019

@Chris2011

This comment has been minimized.

Copy link
Author

commented May 14, 2019

Ok thx.

@futtta futtta closed this May 31, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.