[Support request] A few query block questions

[Sam]

Hi

I am in the process of replacing my WPShowPost tiles and side bar widget with query-loop blocks – just mocking everything up in a staging site

I have a few technical questions which I am unable to solve myself, nor can see any topic in the forum on the matter

1. On my home page, I have a query-loop that displays the 6 latest posts. As some of the titles break on more than one line, it causes the box to be of different height. How can I set the boxes to all be of equal size?

2. On my home page I display 5 query blocks, one for the latest 6 post then 4 for each of the categories. Is there a way to ensure that a post displayed is only once?

3. Extending the question but for side bar widget (on posts, 3 query loops), how can you stop it displaying the current post or repeating any posts

4. Is it possible to dynamic show ‘updated date’, rather than ‘posted date’?

5. My query-loops displayed in the side bar, break into 50/50 on tablet – but for some reason the media break is happening at 1024px before the side is hidden at 800px – how can i make it keep at 100% until the side bar disappears

Thanks

Sam

[Ying]

Hi Sam,

Let’s focus on the 1st question first.

It’s not very easy, and depends on the layout you built within the query loop block, the CSS would be different for each query loop .

For your current main query loop on homepage with 6 posts, try adding this CSS:

.home .gb-query-loop-item.post.gb-grid-column-19575ca7 > .gb-container > .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.home .gb-query-loop-item.post.gb-grid-column-19575ca7 > .gb-container > .gb-inside-container > .gb-container {
    flex: 1;
}

.home .gb-query-loop-item.post.gb-grid-column-19575ca7 .gb-container-cd877665 >.gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home .gb-query-loop-item.post.gb-grid-column-19575ca7 .gb-container-cd877665 >.gb-inside-container >*:last-child {
    margin-top: auto;
}

You will notice the post meta (author and date) goes to 2 rows after apply the CSS, to fix this, you will need to wrap a container block outside the 2 inline post meta.

[Sam]

Thanks Ying that work a treat on that main loop

I have added the image, author name and post meta into a container, and they are now displaying inline.

I image that would be a nightmare to do on the thumb nail query loops (right hand side split) of my category posts?

Ok – number 2 (only show a post once on a page)

For my home page, its only the ‘hot off the press’ post loop that pulls across all categories. The other take a random section from a set taxonomy. Would setting outset be the answer…ie if I set it to 6, it would then exclude the first 6 posts of each category (working on the worse case that all 6 latest post are in the same category)?!?

The side bar its 3 loop, latest 4, then 4 at random, then 2 set by post tag….for than i have set the random 4 loop with an offset of 4 and excluded the tag type. Is that the right way to do it? Or have I gone rouge?

[David]

Hi there,

1. the thumbnail query loops.
Add this CSS:

.align-bottom-item > .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 0 !important;
}

.align-bottom-item > .gb-inside-container > :last-child {
    margin-top: auto;
}

Select the Container Block that has the headline, meta inside and give it a class of: align-bottom-item
For the author | date meta you need to wrap them in a Container

2. Simple answer … no. Not at this time. Still looking into viable solutions for this.

3. If you have GB Pro, then the Exclude Post parameter has the Current Post option

4. Yes, when you have the Date selected as the Content Source you can set its Data Type to Updated

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sam]

That brilliant David thank you.

How about number 5. What to keep the post side bar loops single column until the side bar disappear

Its currently breaking to 50/50 at 1024px before the side is hidden at 800px

[David]

It will need some CSS, as the Tablet breakpoint if a fixed value:

@media(min-width: 801px) {
    #right-sidebar .gb-query-loop-wrapper > .gb-query-loop-item {
        width: 100%;
        padding-left: 0;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sam]

Thank you that worked a treat

Ok – last 2 questions. The thumbnail query, I would like to hide the blue category button on mobile – but using the visibility setting is still displays.

Gaps between query loops, I cant seem to make the gap between individual loops reasonable – any reason why the space is so great?

[David]

1. Try regenerating the CSS in Dashboard > GenerateBlocks > Settings.

2. Depends… some of your query loops have:

a) Container blocks within that have additional bottom / top padding.
b) Headline blocks that have bottom margins added to them.

You need to adjust them.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sam]

Regenerating the css unfortunately has not worked – still displaying on mobile

[Ying]

The thumbnail query, I would like to hide the blue category button on mobile – but using the visibility setting is still displays.

Do you mean the hide on mobile toggle in the advanced tab? If so, I don’t see the hide-on-mobile class being added to the category button.

Maybe try clear cache?

[Author]

Posts