Enable placeholder image styles with embed option

The patch works as expected on a clean Drupal 8 installation.

The new image formatter has a new option to set a placeholder image style. The placeholder is correctly rendered.

However, since the module has the following CSS rule, the placeholder is not shown:

.js .lazyload,
.js .lazyloading {
  opacity: 0;
}

This CSS would need to be removed or overridden in a theme to show the placeholder.

Here is a short video of a page reload with placeholder and simulated slow network:

https://www.drupal.org/files/issues/2020-05-23/test_lazy_with_placeholder.mp4

I suggest we make this configurable configurable in the module. This could be a setting in /admin/config/content/lazy

What do you thing about this @osman?

Moving this to RTBC, because styles can be overridden in theme.

Hi @breidert,

I think this is a very good idea, I like it very much. And thank you for the patch.

I also RTBC, hence committed it on 8.x-3.x.

Thank you :)

I'm actually now working on a tune-up for this, building on top of your idea.

Here's a preview:

I wanted to keep the data URI use optional, as it may not be ideal for all cases. same as the placeholder image style selection.

If a placeholder image style is selected it would be used for that field.

If no placeholder image style is selected, the module settings apply for that field (admin/config/content/lazy): Shared settings > Placeholder image URL.
Or if an image URL or data URI defined, it would be used for all fields not using placeholder image style option.

Now, when an image style is selected for the placeholder image, Use data URI option becomes available.

@osman are you still working on this or is ready for review?

Hi @adamjuran it is ready for a review/test-drive :)

Lazytest1 is with standard 100x100 thumbnail as placeholder while logged out.
Lazytest2 is with a 5px wide new image style as placeholder while logged in.

In admin UI, "Enable lazy-loading" checkbox is there, as is data URI checkbox. Both work as expected.

Moving back to RTBC.

The commit in #8 removed some important empty checks in the third-party settings in lazy_preprocess_field(). These empty checks are important for anyone upgrading from previous version of dev. Without the empty checks, I'm getting these notices:

Notice: Undefined index: placeholder_style in lazy_preprocess_field() (line 195 of modules/contrib/lazy/lazy.module).

Notice: Undefined index: data_uri in lazy_preprocess_field() (line 196 of modules/contrib/lazy/lazy.module).

Attached is a screenshot of the change in #8 that removed these empty checks.

Also attached is a patch that restores the empty checks.

nice catch @pianomansam. and thanks for the patch.