Lazy load img tag

hilaryaq · 2021-05-26 14:49:31

Hi all!

My request is to be able to output lazy load within an image or thumb output tag:

eg. txp:thumbnail id=“298” loading=“lazy”

Would be super handy!

etc · 2021-05-26 15:08:52

hilaryaq wrote #330267:

Would be super handy!

Hi Hilary! Would it? It is, since 4.8.something.

hilaryaq · 2021-05-26 15:11:44

etc wrote #330270:

Hi Hilary! Would it? It is, since 4.8.something.

Ooo does it work within the tag!? Thanks! :)

hilaryaq · 2021-05-26 15:12:30

etc wrote #330270:

Hi Hilary! Would it? It is, since 4.8.something.

Ye are way ahead of me and not for the first time :D

etc · 2021-05-26 15:56:27

hilaryaq wrote #330272:

Ye are way ahead of me and not for the first time :D

I’m often ahead of myself. I thought it worked only in <txp:images />, before some testing.

Bloke · 2021-05-26 17:41:01

It is handy but only (currently) works in the individual image tags. Using it in <txp:images> would require passing that attribute forward to all the tags in the form/container (i.e. setting a globa flagl) so they all have the attribute set by default. At the individual tag level, it then needs to be possible to override the global flag as set in the wrapper.

Code-wise that’s all pretty grungy so we’ve left it at the tag level for now. And if you’re using a form or container, you usually only have one or two <txp:image> or <txp:thumbnail> tags inside it anyway, so it’s not much extra work to add the loading attribute there.

Hope it’s helpful as it is.

etc · 2021-05-26 21:32:59

Bloke wrote #330274:

It is handy but only (currently) works in the individual image tags.

My memory is even worse than I thought, thanks for the reminder.

And if you’re using a form or container, you usually only have one or two <txp:image> or <txp:thumbnail> tags inside it anyway, so it’s not much extra work to add the loading attribute there.

And if you have many manually added images inside Body (and are lazy, unlike the images), a quick-n-dirty trick should do:

<txp:body trim="<img" replace='<img loading="lazy"' />

hilaryaq · 2021-05-27 22:06:05

Brilliant tips, thanks all!! :)

Textpattern CMS

Textpattern CMS support forum

#1 2021-05-26 14:49:31

Lazy load img tag

#2 2021-05-26 15:08:52

Re: Lazy load img tag

hilaryaq wrote #330267:

#3 2021-05-26 15:11:44

Re: Lazy load img tag

etc wrote #330270:

#4 2021-05-26 15:12:30

Re: Lazy load img tag

etc wrote #330270:

#5 2021-05-26 15:56:27

Re: Lazy load img tag

hilaryaq wrote #330272:

#6 2021-05-26 17:41:01

Re: Lazy load img tag

#7 2021-05-26 21:32:59

Re: Lazy load img tag

Bloke wrote #330274:

#8 2021-05-27 22:06:05

Re: Lazy load img tag

Board footer