all-grid theme for image-rich websites

giz · 2020-06-12 01:38:17

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)

colak · 2020-06-12 04:43:20

That looks gorgeous!!!! …

towndock · 2020-06-12 13:04:41

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?

colak · 2020-06-12 13:25:15

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

philwareham · 2020-06-12 13:38:30

Lovely! Like the Star Trek references too! 😀

towndock · 2020-06-12 14:35:26

colak wrote #323727:

It’s already available for download

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

giz · 2020-06-12 17:33:00

Thanks all.

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

Bloke · 2020-06-12 19:17:06

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.

jakob · 2020-06-12 19:30:35

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.

giz · 2020-06-12 20:23:24

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.

giz · 2020-06-12 20:34:25

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.

jakob · 2020-06-12 21:01:12

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!

Textpattern CMS

Textpattern CMS support forum

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