Original description:

How are we now to lazy load images in views in the 8.x-2.x branch?

Added by Bessonweb :

In the 8.x-1.x version, the classe "b-lazy" was added in views automatically. But in the 8.x-2.x version we have not to my knowleage option to do that when the views is managed by field and not by content display.

This would be very interesting to have a parameter for activate the lazy loading on a image field in a view.

Comments

lathan created an issue. See original summary.

le72’s picture

Didn't find that important functionality too :-(

bessonweb’s picture

Category: Bug report » Feature request
Priority: Normal » Major
Issue summary: View changes
Issue tags: +views

I update this issue because I think it is not a bug but a missing feature that will be very interesting.

Please some developer can build something?

Thanks!

bessonweb’s picture

Title: lazy load images in views » Lazy Load images in Views with fields
natalier’s picture

There is no bug, you can choose in Views on Image Formatter->Blazy, it will add the class.
New update gave you more options

osman’s picture

natalier the formatter you mention of actually belongs to another module (Blazy).

Lazy-load only supports the content/view-mode style in Views. Field mode of Views is not supported yet.

However I agree, I think it would be great to support Views fields style. Patches are welcome.

osman’s picture

Version: 8.x-2.x-dev » 8.x-3.x-dev
bessonweb’s picture

Just for help, in my case I have changed the views image field formatter to "Image URL" and used "Rewrite results" in my image field and make this :

<img src="<YOUR PLACEHOLDER IMG URL>" data-src="{{ field_image }}" width="350" height="200" alt="{{ field_image__alt }}" typeof="foaf:Image" class="img-responsive b-lazy">

It work good and it is the proper solution for the moment I think.

Hope that help!

hn0852’s picture

A way to solve this issue is by making a new field formatter for the view that extend media_thumbnail.
You can learn more here https://www.drupal.org/docs/8/creating-custom-modules/creating-custom-fi.... The key here, is to define $element['lazy_image'] in the function settingsForm.

  • osman committed 1459783 on 8.x-3.x
    Issue #3059748: Lazy Load images in Views with fields
    
osman’s picture

Views with fields now can benefit from lazy-loading via added 2 new formatters: Image (Lazy-load), and Responsive image (Lazy-load).

These formatters can also be enabled to use with field display settings in entity display settings:

Additional image formatters

Display settings

osman’s picture

Priority: Major » Normal
Status: Active » Needs review
osman’s picture

Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

mrupsidown’s picture

Views with fields now can benefit from lazy-loading via added 2 new formatters: Image (Lazy-load), and Responsive image (Lazy-load).

I have a View of Media images and I can't seem to be able to enable lazy loading. I don't see the formatters in the view field configuration. I have enabled both formatters in the settings. Am I missing something?