Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#11 2020-06-12 20:34:25

giz
Member
From: New Zealand
Registered: 2004-07-26
Posts: 179
Website

Re: all-grid theme for image-rich websites

I forgot to respond to this bit:

Presumably the aspect cropping means you optimise the image for the respective use where using object-fit: cover; might leave you with some hidden content (and unused bytes).

You’re right: I’m not getting a major advantage from cropping the images if they are already using object-fit: cover, but I’ve found that css grid’s dense packing algorithm needs some help to predict how elements fit.

Detail pages don’t use object-fit: cover; and so benefit more from cropping than list pages.

Offline

#12 2020-06-12 21:01:12

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,841
Website

Re: all-grid theme for image-rich websites

Sorry that last point with object-fit wasn’t meant as a criticism (I hadn’t checked that you were using object-fit already), rather as a comment/ question about how SLIR compares as an alternative strategy.

I guess that if you make your SLIR crop aspect ratio match that of the container aspect ratio, it will always fit exactly as long as the container doesn’t get squashed at other viewport widths.

With object-fit, the browser decides how best to fit an image into a container with a particular aspect ratio. If they don’t match, the visitor downloads more than they get to see, so it is potentially less optimised. On a smallish site, that probably doesn’t make all that much difference but on a site like your artedomus, it probably does!


TXP Builders – finely-crafted code, design and txp

Offline

#13 2020-06-12 21:08:51

giz
Member
From: New Zealand
Registered: 2004-07-26
Posts: 179
Website

Re: all-grid theme for image-rich websites

Agreed. No criticism taken :)

Unfortunately, neither approach helps with the ‘jump’ on detail pages (caused by the article header being superimposed over the hero image). I’ll likely use my Artedomus fix for this (force the proportions of the <picture> container, so the grid knows how much space to allow before the image starts loading.

Offline

#14 2020-06-12 21:22:55

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,841
Website

Re: all-grid theme for image-rich websites

giz wrote #323756:

I’ll likely use my Artedomus fix for this (force the proportions of the <picture> container, so the grid knows how much space to allow before the image starts loading.

There’s a new css property aspect-ratio that’s supposed to help solve that in future. If you want to use it already, you probably need to use @supports.

Harry Roberts recently posted a twist on the ::before/::after padding-top trick for this too – see this Twitter thread.


TXP Builders – finely-crafted code, design and txp

Offline

#15 2020-06-13 01:03:57

giz
Member
From: New Zealand
Registered: 2004-07-26
Posts: 179
Website

Re: all-grid theme for image-rich websites

jakob wrote #323758:

There’s a new css property aspect-ratio that’s supposed to help solve that in future. If you want to use it already, you probably need to use @supports.

Harry Roberts recently posted a twist on the ::before/::after padding-top trick for this too – see this Twitter thread.

Thanks. I’d heard about the new aspect-ratio property, but your link is da business.

Harry Roberts is worth following!

Offline

#16 2020-06-13 13:26:12

gaekwad
Admin
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 2,983

Re: all-grid theme for image-rich websites

giz wrote #323753:

(isn’t there a limit to the number of files you can have in a directory in Apache?)

You’re more likely to hit a filesystem / operating system limit depending on the format of your hard drive, or possibly a limit imposed by your web host for their own damage limitation.

Offline

Board footer

Powered by FluxBB