Add lazy loading example in Cheat Sheet

Created on 24 April 2023, over 1 year ago
Updated 19 January 2024, 10 months ago

Problem/Motivation

Since https://www.drupal.org/node/3279032 ( 📌 Apply width and height attributes to allow responsive image tag use loading="lazy" Fixed ) lazy loading images is an essential part of image handling in Drupal.

Currently this can be achieved using the $attributes parameter like any other HTML attribute to the image tag.

Steps to reproduce

Proposed resolution

A) Add an example for loading: 'lazy' and loading: 'eager' in the Twig Tweak Cheat Sheet using the attributes parameter:

{# Render image using 'thumbnail' image style and "lazy" loading by attribute. #}
{{ drupal_image('public://ocean.jpg', 'thumbnail', {loading: 'lazy'}) }}
{{ drupal_image('public://ocean.jpg', 'thumbnail', {loading: 'eager'}) }}

B) Honor the importance of lazy loading and add a separate boolean parameter

Remaining tasks

Discuss
Implement
Release

User interface changes

API changes

Data model changes

Feature request
Status

Fixed

Version

3.0

Component

Code

Created by

🇩🇪Germany Anybody Porta Westfalica

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024