Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2018-11-05 19:36:25

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 805
Website

How to lazyload images with columns (css) ... !?

As you can see here > www.mariaberkhout.nl/test I’ve made a layout with columns. Three if it’s a wide screen. The images are inside articles and have all sorts of dimensions. I like the looseness it all causes.

The lazyload script that’s running (lazySizes) should work (according to the dev) to handle the visual chaos when the page is loading. Please, reload the page and scroll down or up.

The solution should be in the readme file. And there I need help. Is there someone who can verify if there’s something to be found that makes the page (images) load in a more smoothly way? And how and where to start?

Offline

#2 2018-11-05 21:12:59

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: How to lazyload images with columns (css) ... !?

Nice site! I’ve only very limited experience with it but some ideas:

  • It says here that it can be helpful to specify either the precise image sizes with the width and height attributes to reduce page jumpiness when the page scrolls. For responsive images, where your image sizes are unknown it suggests using the aspect-ratio trick.
  • If I’m not mistaken, you’re using css columns, right? Because that runs vertically down each column, then switches to next column etc., that might be a cause of reflow calculations when the images only load once they come into the range of the (expanded) viewport because the css-column layout method tries to balance the columns based on content size that only becomes known when the image loads. There’s a stackoverflow thread on a similar-sounding problem.
  • If you just want the images to fade in more smoothly, there’s an extra lazysizes plugin for that called blur up.

TXP Builders – finely-crafted code, design and txp

Offline

#3 2018-11-06 06:49:19

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: How to lazyload images with columns (css) ... !?

Lazy load is working on mobile for your site. Nice stuff.

Offline

#4 2018-11-06 15:56:53

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,071
Website Mastodon

Re: How to lazyload images with columns (css) ... !?

what a lovely experience visiting your site in both the desktop and mobile.
congratulations!


…. texted postive

Offline

#5 2018-11-06 16:48:22

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 805
Website

Re: How to lazyload images with columns (css) ... !?

jakob wrote #314990:

Nice site!

Thanks @jakob … :)

  • If I’m not mistaken, you’re using css columns, right? Because that runs vertically down each column, then switches to next column etc., that might be a cause of reflow calculations when the images only load once they come into the range of the (expanded) viewport because the css-column layout method tries to balance the columns based on content size that only becomes known when the image loads. There’s a stackoverflow thread on a similar-sounding problem.

Your analysis is quite right. In case of responsive images the CSS intrinsic ratio scaling technique only works if there are images with equal width and height ratios. And in this case there aren’t. And I like to keep it that way … :o

I think I have to skip using a lazyload script and must accept (for now) that the page is heavy, very heavy for some internet connections. The one thing I have to do though, is to investigate how I can ask smd_thumbnail to extract the right width and height of the image that’s being rendered by the browser. It would speed up the loading time of the page.

With the attribute force_size="value" of the plugin it should be possible if I’m correct. But how (and where) do I do that if the code (macro) is:

<figure class="landscape">
<txp:images id="{img_id}">
<txp:adi_if_not_mobile><a class="chocolat-image" href='<txp:smd_thumbnail type="1800"><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail>' title="<txp:page_title />"></txp:adi_if_not_mobile>
<img class="lazyload" data-src='<txp:smd_thumbnail id="{img_id}" type="300"><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail>' alt="Painting with egg tempera, acrylics or oil on linen or paper" data-srcset='<txp:smd_thumbnail id="{img_id}" type="200"><txp:smd_thumbnail_info item="url" /> 200w</txp:smd_thumbnail>, <txp:smd_thumbnail id="{img_id}" type="300"><txp:smd_thumbnail_info item="url" /> 300w</txp:smd_thumbnail>, <txp:smd_thumbnail id="{img_id}" type="400"><txp:smd_thumbnail_info item="url" /> 400w</txp:smd_thumbnail>, <txp:smd_thumbnail id="{img_id}" type="600"><txp:smd_thumbnail_info item="url" /> 600w</txp:smd_thumbnail>, <txp:smd_thumbnail id="{img_id}" type="800"><txp:smd_thumbnail_info item="url" /> 800w</txp:smd_thumbnail>, <txp:smd_thumbnail id="{img_id}" type="900"><txp:smd_thumbnail_info item="url" /> 900w</txp:smd_thumbnail>, <txp:smd_thumbnail id="{img_id}" type="1200"><txp:smd_thumbnail_info item="url" /> 1200w</txp:smd_thumbnail>'
sizes="(min-width: 17.5em) calc(100vw), (min-width: 27.7775em) calc(50vw - 32px), 400px" /><txp:adi_if_not_mobile></a></txp:adi_if_not_mobile></txp:images>
<figcaption><txp:rah_replace from="<p>,</p>" to=","><txp:upm_textile lite="1">{caption}</txp:upm_textile></txp:rah_replace></figcaption>
</figure>

… !?

Last edited by RedFox (2018-11-06 16:53:57)

Offline

#6 2018-11-06 16:57:45

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 805
Website

Re: How to lazyload images with columns (css) ... !?

philwareham wrote #315001:

Lazy load is working on mobile for your site. Nice stuff.

Yes, very fine art made by the woman I live with … :)

And yes, the script is working nicely on smartphones because there is only one column … no reflows and page jumps … :)

Offline

#7 2018-11-06 17:09:58

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 805
Website

Re: How to lazyload images with columns (css) ... !?

bici wrote #315017:

what a lovely experience visiting your site in both the desktop and mobile.
congratulations!

Thank you … :))

Offline

#8 2018-11-06 17:24:38

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: How to lazyload images with columns (css) ... !?

RedFox wrote #315019:

The one thing I have to do though, is to investigate how I can ask smd_thumbnail to extract the right width and height of the image that’s being rendered by the browser. It would speed up the loading time of the page.

With the attribute force_size="value" of the plugin it should be possible if I’m correct. But how (and where) do I do that if the code (macro) is:

If you look at these lines of the plugin, it looks like you use force_size="width" or force_size="height" or force_size="width, height". You could also use txp:image_info to output the image width and height.

In case of responsive images the CSS intrinsic ratio scaling technique only works if there are images with equal width and height ratios. And in this case there aren’t. And I like to keep it that way … :o

Another vague idea you might want to try in conjunction with the responsive technique and setting padding-bottom as a percentage value of the aspect-ratio: perhaps you can dynamically calculate the aspect ratio for each image based on its height and width and insert that as an inline atttribute – style="padding-top: 56.25%;" (or whatever) – into your image container, so that the box already has the right size although the image isn’t (yet) in it.

EDIT: here’s that idea using padding-top: calc(img_h / img_w * 100%);.


TXP Builders – finely-crafted code, design and txp

Offline

#9 2018-11-06 19:39:11

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 805
Website

Re: How to lazyload images with columns (css) ... !?

jakob wrote #315025:

If you look at these lines of the plugin, it looks like you use force_size="width" or force_size="height" or force_size="width, height". You could also use txp:image_info to output the image width and height.

Yes, but where do I put it? See the code snippit in a former post.

Last edited by RedFox (2018-11-06 19:51:38)

Offline

#10 2018-11-06 20:00:31

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 805
Website

Re: How to lazyload images with columns (css) ... !?

jakob wrote #315025:

Another vague idea you might want to try in conjunction with the responsive technique and setting padding-bottom as a percentage value of the aspect-ratio: perhaps you can dynamically calculate the aspect ratio for each image based on its height and width and insert that as an inline atttribute – style="padding-top: 56.25%;" (or whatever) – into your image container, so that the box already has the right size although the image isn’t (yet) in it.

EDIT: here’s that idea using padding-top: calc(img_h / img_w * 100%);.

Maybe it can be done with txp:smd_thumbnail_info item="w" … nevertheless I think that we first have to get force_size="width" working, isn’t it?

Offline

#11 2018-11-06 20:09:15

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: How to lazyload images with columns (css) ... !?

Ah, it says force_size is added to the img tag, so that will only be when using smd_thumbnail as a standalone tag and not as a container.

What you could do is add either this to your img tag:

height="<txp:image_info type="h" />" width="<txp:image_info type="w" />"

or this:

style="padding-top: calc(<txp:image_info type="h" /> / <txp:image_info type="w" /> * 100%);"

to your container in your macro.


TXP Builders – finely-crafted code, design and txp

Offline

#12 2018-11-06 20:25:24

Vienuolis
Member
From: Vilnius, Lithuania
Registered: 2009-06-14
Posts: 307
Website GitHub GitLab Twitter

Re: How to lazyload images with columns (css) ... !?

Why the column layout? I hope the flexible leyout (display: flex, flex-flow: row wrap, justify-content: space-around or similar) would be more coherent, more steady, and far lighter.

Offline

Board footer

Powered by FluxBB