Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

giz
Member
From: New Zealand
Registered: 2004-07-26
Posts: 221
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: 4,173
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: 221
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
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 3,632
GitHub

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

#17 2021-04-13 20:55:06

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

Re: all-grid theme for image-rich websites

I’ve updated my all-grid theme after using it as the basis for a couple of new sites.

It includes:

  • more layout variants via use of status=sticky and form-overide
  • a refactoring of much of the css
  • easier access to core styling variables, and a style-switcher
  • an option to use a ‘standard’ menu system instead of the default ‘hamburger’

There is more in the pipeline, primarily around image handling and display.

Offline

#18 2021-04-14 02:27:32

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 1,869
Website

Re: all-grid theme for image-rich websites

simply amazing!


…. texted postive

Offline

#19 2021-06-02 04:33:17

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 1,869
Website

Re: all-grid theme for image-rich websites

dear @giz

you have errors


…. texted postive

Offline

#20 2021-06-02 18:16:28

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

Re: all-grid theme for image-rich websites

Thanks @bici

If that’s the only error to be found in my archived websites collection, I’m pleased :)

Last edited by giz (2021-06-02 18:17:16)

Offline

#21 2021-09-19 21:43:16

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

Re: all-grid theme for image-rich websites

A new lockdown, a new version of my all-grid theme.

  • grid-loose and grid-formal variants, freely interchangeable via
    • section pages
    • article forms
  • complete refactoring of the css: layouts can be bossed around via:
    1. changing the content i.e. with or without article images, sticky vs. live articles, form overrides
    2. changing css variable values in the stylesheet
    3. swapping element class names in the pages and forms
    4. in the stylesheet css (the last resort :)
  • image independence; choose between:
    • no resizing – original image displayed (default)
    • resizing via smd_thumbnail
    • resizing via SLIR
  • lazysizes.js provides automatic sizes calculation for responsive images




Offline

Board footer

Powered by FluxBB