Blog Archive design with filters and 2 bigger posts at the top?

Hi folks,

does anyone know in which way I could make this design possible?

  • with filters for categories
  • with 2 bigger posts at the top
  • with pagination at the bottom

Thank you!

Kind regards,
Heiko

I would add 2 post query blocks. Set one to 50% 2 columns - so the 2 larger posts. Limit to 2 posts in query.
Second one, normal query offset by 2 (to skip first two posts) and then 4 columns (or 25%).
Sadly there’s no alternate styles - so you’d need a css nth-child rule to get the alternating colors.

1 Like

If the top two posts should be kinda sticky as in the 2 most important posts or whatever instead of being the latest ones or whatever the order is set too, I’d also use 2 query blocks like @digismith said. If not, it’s pretty easy to target the first to posts to change the width. Here is a barebones example which might have to be adapted based on your structure:

.parent-selector .child-post-selector:nth-child(-n+2) {
    width: 50%;
}

About the filters and pagination… Haven’t played around with the native filters in Bricks yet but you might wanna consider this related thread: https://forum.bricksbuilder.io/t/no-bug-trouble-with-post-filters/6627

1 Like

Thanks a ton for this awesome tip, @digismith! :pray: Very much appreciated! Will try that!

And also, @manc - thanks so much too for your hint and the code example. :pray: Also I checked out the link, that helped!