Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

hilaryaq
Plugin Author
Registered: 2006-08-20
Posts: 335
Website

Lazy load img tag

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!


…………………
I <3 txp
…………………

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 5,208
Website GitHub

Re: Lazy load img tag

hilaryaq wrote #330267:

Would be super handy!

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

Offline

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

hilaryaq
Plugin Author
Registered: 2006-08-20
Posts: 335
Website

Re: Lazy load img tag

etc wrote #330270:

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

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


…………………
I <3 txp
…………………

Offline

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

hilaryaq
Plugin Author
Registered: 2006-08-20
Posts: 335
Website

Re: Lazy load img tag

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


…………………
I <3 txp
…………………

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 5,208
Website GitHub

Re: Lazy load img tag

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.

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,456
Website GitHub

Re: Lazy load img tag

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 5,208
Website GitHub

Re: Lazy load img tag

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"' />

Offline

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

hilaryaq
Plugin Author
Registered: 2006-08-20
Posts: 335
Website

Re: Lazy load img tag

Brilliant tips, thanks all!! :)


…………………
I <3 txp
…………………

Offline

Board footer

Powered by FluxBB