Dynamic category archive page with GenerateBlocks

Hi there,

if you create a Block Element - Content Template.
And then set the Display Rules > Location to: Post Category Archive -> All Categories. Then that will do ALL of them.

Understood. What query logic should I set? I've tried multiple combinations and it's not working for me.

Right now it just pulls in the most recent posts and repeats itself an excessive amount of times (regardless of which category I'm on), but I need for each category to pull its own content.

Likewise, is there anything I should adjust under the Customize -> Layout -> Blog?

Thanks

Ultimately I'm trying to achieve a 4-column layout with 7 rows for a total of 28 posts per category (and pagination so that a user can click through the rest).

Hi Dmitrii,

For Archive pages, you’ll need to use a Content Template - Block Element, not a Query Loop Block.

Reference: https://docs.generatepress.com/article/block-element-content-template/

You can set the columns through Appearance > Customize > Layout > Blog > Columns.

Reference: https://docs.generatepress.com/article/blog-overview/

Hope this clarifies!

Knew I was having a brain fart - totally makes sense now. Thanks!

I managed to recreate the layout I made with GB, but the CSS I used to add spacing between columns is lacking a bit for my needs.

Came across David's post/CSS below which works great, but it also pushes the first column to the right, which ruins the alignment.

.generate-columns .inside-article {
    padding-left: 30px;
}

Is there something I can add to this so that it ignores the first column?

Thanks again!

In your Block Element - Content Template do you have the Keep default post container toggle enabled ?

I do: https://ibb.co/KWPwm8m

And what is the content spacing you have set in Customizer > Layout > Container ?

Container Width = 1240px
Separating Space = 0px
Content Separator = 0px

Hi Dmitrii,

You can alter your code into something like this:

@media (min-width: 769px) and (max-width: 1024px) {
    article:not(:nth-of-type(2n+1)).generate-columns .inside-article {
        padding-left: 30px;
    }
}

@media (min-width: 1025px) {
    article:not(:nth-of-type(4n+1)).generate-columns .inside-article {
        padding-left: 30px;
    }
}

On desktop, it won’t add the left padding on every 1st, 5th…etc articles. On tablet, it only adds the left padding to the “even” articles, so 2nd, 4th, 6th, etc.

Hope this helps!

Worked perfectly, thank you sir!

You’re welcome Dmitrii!

Hi Fernando - I was doing a sweep of the site and noticed the padding was a bit off (between the first and second columns). Any suggestions?

Just realized - Can you try removing the code, and just add value to the Separating Space in Customize > Layout > Container?