I'm trying to implement a script for lazy loading images on my site and I'm not sure how to target specific image templates. I need to change the src attribute to data-src and add a class.

All images are currently using image.html.twig. If I change that template it almost works but ends up changing some images it shouldn't.

What would be a good way to modify the attributes of these images based on their use within specific paragraphs across the site?



Three approaches (of many that are possible):

A good way would be to use a custom field formatter for images with data-src and configure this field formatter in the paragraph type. This is a module solution, but I think this is a good idea anyway to bundle this feature including the libraries.

A theming solution would be to add an attribute to each image field in a paragraph preprocess hook and then check for this attribute in the image template.

The easiest solution is to create a separate image style for lazy loading and check the style name in the image template.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.