Lazy Images: Allow filtering out images via class and attributes

[ebinnion]

Closes #8785
Closes #8641

In #8641, a user requests the ability to skip processing images with a given class.

In #8745, a user reports a compatibility issue with another plugin where we shouldn't be processing an image so that it's lazy. After looking at the plugin's code, I don't see any specific classes that we can hook on.

These two issues go pretty well together. 😄

This PR will begin skipping images where the skip-lazy class is applied. Further, a user can filter jetpack_lazy_images_blacklisted_classes to add or remove classes to the list of classes that we'll skip.

I've also added a filter that will allow skipping an image via its attributes. The jetpack_lazy_images_skip_image_with_atttributes receives an array of the current image's attributes as its second argument. Filters can hook on this, examine the attributes, and decide whether to skip the image or not.

These two methods of skipping images should provide a good amount of flexibility for plugins and themes.

To test:

• Run tests phpunit --testsuite=lazy-images
  • Note: there is currently a test that does not assert anything. That is not related to this PR. Lazy Images: Fixes test that had no assertion #8788 fixes that test. (Merged already)
• Ensure lazy images is on
• Install and activate gazette theme
• Go to customizer, the "Featured Content" section, then select a tag to show featured posts
• Ensure that some posts have featured images and the tag from the previous step
• Load frontend and ensure that the featured image thumbnails up to are displaying correctly

Changelog entry

• We now allow lazy images to skip images with the skip-lazy css class or any give class of your choice by using the jetpack_lazy_images_blacklisted_classes filter.

[oskosk]

Tested. Unfortunately I haven't noticed any difference in the way the featured images load on the home page with Lazy Images turned on. My comprison was against master and against this PR.

But I do notice some difference on the individual post view. I'm testing again and getting some screencaps

[ebinnion]

Tested. Unfortunately I haven't noticed any difference in the way the featured images load on the home page with Lazy Images turned on. My comprison was against master and against this PR.

Is this with the Gazette theme? Ideally, you wouldn't see differences with the featured content that shows at the very top of the theme since we'd be skipping those images.

[ebinnion]

Hey @oskosk – can you provide a bit more detail? You mentioned some screenshots in your last comment.

[gravityrail]

LGTM

[oskosk]

Is this with the Gazette theme? Ideally, you wouldn't see differences with the featured content that shows at the very top of the theme since we'd be skipping those images.

So, following the testing instructions is that I noticed no difference on the homepage. Indeed with the Gazette theme.

The screenshots I mentioned are related to Lazy images and gazette but on the single post view.

That super high block that appears on the single post view is seen when Lazy Images is turned on, both on latest stable and in this PR.

[oskosk]

As explained in slack, seeing no differences in the homepage for gazette implies that this changeset works fine. LGTM!

[boiangeorgiev]

It's funny how half an year later no one noticed the typo in one of these filters.
It should be jetpack_lazy_images_skip_image_with_attributes and not jetpack_lazy_images_skip_image_with_atttributes. Apparently this filter is not used very often.

[ebinnion]

Hi @boiangeorgiev – Thank you for the report. I have created #10002 to address the typo.