Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
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
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
andheight
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
Re: How to lazyload images with columns (css) ... !?
Lazy load is working on mobile for your site. Nice stuff.
Offline
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
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
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
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
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
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"
orforce_size="height"
orforce_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
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
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
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