Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2020-06-12 01:38:17

giz
Member
From: New Zealand
Registered: 2004-07-26
Posts: 304
Website GitHub Twitter

all-grid theme for image-rich websites

Demo: https://all-grid.all-sorts.biz

Suitable for small to large sites with flexible image display requirements.

all-grid:

  • uses a plain ui, your imagery is the focus
  • uses the proportion of your images to inform the grid layout
  • treats mobiles as first class citizens (the layout is consistent across screen sizes)
  • can be used without imagery
  • sticky articles are given prominence on any list page

all-grid!

Specify a --grid-base in the theme stylesheet, and all-grid will adjust your layout accordingly. If you use the css unit vw eg. --grid-base: 15vw;, the grid will maintain consistent proportions across all screen sizes. Use px eg. --grid-base: 160px; and the grid will change as the viewport changes.

By default, front page articles are listed randomly (try reloading the page to see how all-grid copes with various image proportions). Other sections are listed using default sorting.

image handling

all-grid includes SLIR, a PHP script to automatically crop and resize images that you have uploaded into the Content:Images tab. Specify images by entering their ids in an Article image field.

typography

Font sizes adjust automatically depending on the width of the viewport, and can be changed using the set up variables in the theme stylesheet.

to do…

Get rid of the ‘jump’ that happens when visiting a page for the first time (images haven’t started downloading yet, and the css grid algorithm is hedging its bets). This is currently exacerbated by images which are being processed by SLIR for the first time / are not cached on the server yet.

wouldn’t that bring about chaos?

For a limited time you can login to the admin area using Name: the first name of TXP’s first commenter in lowercase and Password: the last name of TXP’s first commenter in lowercase. All bets are off if more than one of you try this at any one time :) I’ll revert to a backup (rss_admin_db_manager is installed) if things lose the plot. Yell if you’d like a personal login and I’ll make it so.

Last edited by giz (2020-06-12 01:39:34)

Offline

#2 2020-06-12 04:43:20

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,093
Website GitHub Mastodon Twitter

Re: all-grid theme for image-rich websites

That looks gorgeous!!!! …


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#3 2020-06-12 13:04:41

towndock
Member
From: Oriental, NC USA
Registered: 2007-04-06
Posts: 329
Website

Re: all-grid theme for image-rich websites

I like this a lot. I can think of at least one site this would be perfect for. Kudos on adding the image handling feature. Will all-grid be available for download and/or purchase?

Offline

#4 2020-06-12 13:25:15

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,093
Website GitHub Mastodon Twitter

Re: all-grid theme for image-rich websites

towndock wrote #323726:

I like this a lot. I can think of at least one site this would be perfect for. Kudos on adding the image handling feature. Will all-grid be available for download and/or purchase?

It’s already available for download


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#5 2020-06-12 13:38:30

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

Re: all-grid theme for image-rich websites

Lovely! Like the Star Trek references too! 😀

Offline

#6 2020-06-12 14:35:26

towndock
Member
From: Oriental, NC USA
Registered: 2007-04-06
Posts: 329
Website

Re: all-grid theme for image-rich websites

colak wrote #323727:

It’s already available for download

Doh! I was bad and didn’t read “About”. Downloading and smiling now.

Offline

#7 2020-06-12 17:33:00

giz
Member
From: New Zealand
Registered: 2004-07-26
Posts: 304
Website GitHub Twitter

Re: all-grid theme for image-rich websites

Thanks all.

Its a distillation of what most my clients ask for in a website; let the images do the talking.

Offline

#8 2020-06-12 19:17:06

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

Re: all-grid theme for image-rich websites

That’s sweet! And a welcome addition to the themes that are starting to emerge. (Txp Builders have developed one too, but we’re waiting on client sign-off before we can release it).

Looking forward to getting the themes site up and running so we can showcase some of this talent. Thanks so much for developing this and packaging it up for everyone.


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

#9 2020-06-12 19:30:35

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

Re: all-grid theme for image-rich websites

Cool! Nice idea with Corbusiers’ Polychromie Architecturale and good looking pics as well. I like the way you’ve used css grid to handle the portrait and landscape pics. I’m not a trekkie but even I got the references :-)

Just out of interest, is there a specific reason / benefit in using SLIR over something like smd_thumbnail? 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).

PS: I could feel the resistance in my fingers typing in the login name.


TXP Builders – finely-crafted code, design and txp

Offline

#10 2020-06-12 20:23:24

giz
Member
From: New Zealand
Registered: 2004-07-26
Posts: 304
Website GitHub Twitter

Re: all-grid theme for image-rich websites

Thanks Bloke & jakob!

jakob wrote #323743:

Just out of interest, is there a specific reason / benefit in using SLIR over something like smd_thumbnail? 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).

Its been a long time since I last used smd_thumbnail, but I like SLIR for its flexibility and reliability. You can limit image scaling to height and/or width parameters, use crop-ratios (centered, topcentered, smart), adjust quality / background fill-colour and whether it displays progressively or not.

When developing a site I experiment like crazy with various sizes / proportions of the images, and SLIR makes this easy. It also removes unused crop variants from its cache, so I don’t have to clean up my mess!

A single install of SLIR handles all the imagery for artedomus – the site gets around 6000 visits a day, has a database of around 7000 images, with a minimum of 4 variant sizes for each. Eek! I’ve been waiting for a problem to appear (isn’t there a limit to the number of files you can have in a directory in Apache?), but the install has been running without a glitch since 2016.

Offline

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

giz
Member
From: New Zealand
Registered: 2004-07-26
Posts: 304
Website GitHub Twitter

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: 4,743
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

Board footer

Powered by FluxBB