imagelazy-loadingspip

How can I add a lazy="loading" attribute to img in #TEXTE in SPIP


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?


Solution

  • 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.