Lazyload image or how to setup custom data-src and classes with tiwg?

Archive
1

Hi,

I want to use https://www.npmjs.com/package/lazysizes to lazyload heading and thumbnail images, however I cannot find how to properly change media markup in twig templates. Can anyone help me out?

Massive thanks.

2

It’s currently not possible to change how the media is output. This is done by the Parsedown library that takes the markdown syntax and converts it into the appropriate HTML. Currently this code exists in the ParsedownGravTrait, specifically in the inlineImage() method.

You cannot currently modify this without messing with the system class directly. I am working on providing a solution to allow modifying the Parsedown functionality from a Grav plugin, but it requires a small change to Parsedown. I’ve submitted a PR and hopefully it will be accepted: https://github.com/erusev/parsedown/pull/373

3

Hey! I recently used lazysizes on a project. Here’s some shortened code snippet form one of my templates.
-```
{% set images = page.media.images %}
{% for image in images %}




{% endfor %}

1 Like