In Spip 4.2, I am trying to automatically add the loading="lazy"
attribute to all my <img />
in #TEXTE
to implement lazy loading in my articles.
I tried to find and replace "img src" by "img loading="lazy" src" but it does not work:
[(#TEXTE|replace{<img}{<img loading="lazy"})]
and #TEXTE|extraire_attribut{'loading', 'lazy'}
does not seem to affect anything.
How can I add a lazy="loading" attribute to img in #TEXTE in SPIP?
The best way of doing this is to surcharge the file
/plugins-dist/medias/modeles/image.html
by creating this file
squelettes/modeles/image.html
and adding loading="lazy"
here:
[<img src='(#URL_DOCUMENT_FICHIER|attribut_url)'[ width="(#LARGEUR|attribut_html)"][ height="(#HAUTEUR|attribut_html)"] loading="lazy"/>]})]})]
###OLD Answer
Adding quotation marks and removing the <
character worked. To avoid changes the words in the text starting by img
the beginning of the first default attribute can be quoted as img src
given the code to insert an image is <img src=... />
(#TEXTE|replace{"img src","img loading='lazy' src"})
This might not be the most computationally efficient way of doing it since it has a search and replace function but pages can be cached using various plugins to avoid repeating this too often.