Blog posts not sorting

Hello,

I’m prototyping migrating a Hugo site to Grav, and am running into an issue where my posts don’t sort correctly. You can see it on this throwaway site:

https://lightsoutgames.fly.dev/

Note that a post dated October 1, 2021 comes after one dated September 24.

Since I migrated from Hugo, I converted all the dates by hand. They appear to show up on posts correctly, but sorting isn’t working at all.

I don’t know how to help you help me, so I created a throwaway account as well. Username: admin, password: “Password1.” Feel free to break whatever, since again, this is a throwaway. Happy to answer any questions as well–I just figured it was easier this way.

What am I doing wrong? The collection/sort code was copied from the docs, and again, the dates seem to display correctly. I may have the times wrong, but there isn’t more than a single post per day, so I’d expect at least that much to be correct.

Thanks.

@nolan, What I see at page ‘News’ is:

  • Oct 28 (left)
  • Oct 1 (right)
  • Sept 24 (lower left)
  • Aug 13 (lower right)

If I narrow the window, to display a single column, I see:

  • Oct 28
  • Oct 1
  • Sept 24
  • Aug 13

Oh wow, is it supposed to display posts in columns like that? I’m a
blind screen reader user and tried customizing the default quark theme
to fix some accessibility issues, so maybe I broke something. It
definitely doesn’t read them it the correct order.

Interesting, so it’s definitely in the right order in the feed–I cracked open the atom and checked out the XML. It’s just when I browse the page that things aren’t presented in the right order.

Is this some sort of multi-column gallery view? I’ve never encountered a situation like this, where posts are so thoroughly scrambled. Seems like an unintuitive default, so I’m wondering if I broke something with my customizations, or if there’s a toggle somewhere that I missed.

Thanks.

@nolan, The blog items can be displayed in 1 or 2 columns depending on the width of the window. Also, the blog items are laid out using bricklayer which tries to shuffle items in such a way that one column is not much longer then the other. I guess that items might be laid out in such a way that order is not preserved.

Interesting, I wondered if the bricklayer library might be at fault here.

Is it possible to disable its use without removing it from the theme,
and still having it look OK? This accessibility issue is a non-starter
for me.

Failing that, are there any well-maintained themes that are fairly
versatile and don’t use Bricklayer? Something using Bootstrap might be
best since it’s what I’m most familiar with, and I can swap out themes
on the CSS/Bootstrap level as well. I’ve checked out the themes list,
but if anyone has a recommendation then I’m interested in it.

Thanks.

@nolan, The purpose of utilities like bricklayer or masonry is that they try to keep the bottom of the columns relatively equal. This is often used for image galleries, but in Quark also for the layout of blog items. I agree that that doesn’t make much sense for items ordered by date/time…

There are a few Bootstrap based themes. I would suggest to stick to themes build by ‘Team Grav’ or ‘TrilBy Media’. Btw. ‘Trilby Media’ is the company that the developers of Grav have setup for their consultancy.
By sticking to these themes you can be assured that these themes are kept up-to-date and aren’t abandoned.

You might give theme ‘Bootstrap4’ a try. It does not use bricklayer nor masonry.

Not sure about your coding skill, but you could try to replace bricklayer with masonry. Masonry has an option to keep the items ordered, at the expense of columns not having similar heights.