[Support request] A few query block questions

Home Forums Support [Support request] A few query block questions

Home Forums Support A few query block questions

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2395914
    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

    #2395932
    Ying
    Staff
    Customer Support

    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.

    #2396004
    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?

    #2396705
    David
    Staff
    Customer Support

    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

    #2397909
    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

    #2397925
    David
    Staff
    Customer Support

    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;
        }
    }
    #2398113
    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?

    #2398221
    David
    Staff
    Customer Support

    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.

    #2398730
    Sam

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

    #2398794
    Ying
    Staff
    Customer Support

    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?

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.