[Resolved] Category templates with Query Loop

Home Forums Support [Resolved] Category templates with Query Loop

Home Forums Support Category templates with Query Loop

  • This topic has 11 replies, 3 voices, and was last updated 3 weeks ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2285122
    Erika

    Hi there,

    David had an interesting post few days ago on blog styling and query loops: #2281552.

    I have a similar issue and seem to miss someting.

    I´d like to create a query loop block on a page that displays only two categories with two different designs. I created two block elements (just like in Leos fantastic video). These blocks have the settings:
    -custom template –> article
    -taxonomy category –> category choosen
    -no parent element
    -display rule: blog
    On the page “Query Loop with two categories and block elements” I have set the query loop to display only these two categories.

    On my blog page I´d like to exclude these two categories and have the blog page to have its own block element design. The block element is a content template that applies to all posts.
    On the page “New Blog Query Loop” I excluded the two categories in the taxonomy.

    On the two new sites the proper blog articles are displayed, but without design, it seems that the block elements are not “connected”.

    What setting do I have wrong or what do I miss here? Maybe the display rules should be set different?

    Thanks,

    Erika

    #2285562
    Fernando
    Customer Support

    Hi Erika,

    To clarify, you have a Query Loop Block displayed in you Posts page, and you want to exclude the categories you’ve added in the Query Loop Block in your blog page main query?

    If so, you’ll need to manually exclude it through code. For instance:

    function exclude_category_home( $query ) {
    if ( $query->is_home ) {
    $query->set( 'cat', '-5, -9' );
    }
    return $query;
    }
     
    add_filter( 'pre_get_posts', 'exclude_category_home' );

    Kindly replace 5 and 9 with your category id. Getting the category id: https://www.wpbeginner.com/beginners-guide/how-to-find-post-category-tag-comments-or-user-id-in-wordpress/#:~:text=You%20can%20also%20view%20your,hover%20on%20your%20category%20title.

    Hope this clarifies!

    #2285777
    Erika

    Hi Fernando,

    sorry, no, this is not the problem. I have already excluded the categories which I do not need. Content is fine.

    The problem is that the blocks in the Query Loops do not pull the design from the elements, i. e. I created different layouts as block element for the different categories. On the Blog Page all fine. On other pages where I inserted a Query Loop block no design is pulled.

    I hope you can follow me…

    Thanks, Erika

    #2285782
    Fernando
    Customer Support

    Sorry, I still can’t follow.

    What do you mean by “pull the design from the element”?

    Query Loop Blocks design should come from how you designed the Query Loop itself, not from an Element.

    You’re using a Content Template – Block Element for your Blog which is correct.

    The design made through a Content Template doesn’t apply to Query Loop Blocks.

    Perhaps you can provide screenshots for us the have a better grasp of the context?: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

    Kindly let us know.

    #2285785
    Erika

    Hi Fernando,

    then this is what is wrong. I had the idea that I could create two elements, one designed for categorie #1 and one designed for categorie #2, display categorie 1&2 in the Query Loop and set it up the way that the block elements are used just like on the Blog Page.

    Any idea how to realize this?

    Basically I would like to have the design which I have on the homepage under the section “Elternstimmen”, categorie #1 white background and categorie #2 no background.

    Thanks, Erika

    #2285809
    Fernando
    Customer Support

    To clarify, do you want the category 1 and 2 to alternate in order of appearance? You would need custom code for this.

    What you can do is create a Query Loop Block that gets category 1 and 2, and change the background color alternatively through CSS.

    Something like this: https://share.getcloudapp.com/YEukzQze

    Example CSS:

    .gb-grid-wrapper.gb-grid-wrapper-e8814357.gb-query-loop-wrapper > .gb-grid-column:nth-of-type(even) {
        background-color: #ffffff;
    }

    Hope this clarifies!

    #2285827
    Erika

    Yes, this is what I would like to reach and just started to think in CSS direction. However, this code is not yet functioning.

    See link.

    #2285835
    Fernando
    Customer Support

    Try adding my-query to the class list of the Query Loop Block. This can be done in the Advanced settings section of the Query Loop Block.

    Then, add either of this CSS:

    Target category:

    .gb-grid-wrapper.my-query > .gb-grid-column.category-waskundensagen {
        background-color: #ffffff;
    }

    Alternate:

    .gb-grid-wrapper.my-query > .gb-grid-column:nth-last-of-type(even) {
        background-color: #ffffff;
    }

    You can modify waskundensagen with the category slug, #ffffff with your preferred color code, and even with odd if you prefer.

    Kindly let us know how it goes.

    #2285863
    Erika

    Hi Fernando,

    very stupid, but if I select the Query Loop block, I don´t have an Advanced settings in the settings. Every other block has it. Why?

    If I add WPs own Loop-query, that has the Advanced settings.

    However, I added the class to the grid and it works now.

    Thanks, Erika

    #2286053
    David
    Staff
    Customer Support

    Hi there,

    just to cover, mixing ‘content templates’ in the query loop isn’t possible at this time. The way we did it in Elements was kinda unique and dare i say clever, but its reliant on Theme Hooks that don’t exist in Blocks.

    But we are looking into how to achieve that and other design options in the future.

    Regarding the CSS Classes, the Grid Block is the correct place for adding the class.
    Our Query Loop differs greatly to core.
    The core block is responsible for building the query, rendering the HTML and the CSS
    GB Query Loop is responsible for building the Query and auto inserting the Grid and Container.

    This meant we did not have to create or maintain a grid system specifically for the Query Loop. We just used what we had already 🙂
    Aside from less code the advnantages are many.

    1. You get the styling controls of Grid and Container Blocks.
    2. Any updates to any of our blocks will be available, where feasible, in the query loop.
    3. We can repurpose the Query Loop for other things 🙂

    I hope that clears things up. And its great to see Query Loop being used like this !!

    #2286082
    Erika

    Hi David,

    wow, thanks for taking time to explain this. I see so many possibilities to use this on different sites and it is real fun to experiment with it. Unfortnately you will get some more questions to answer, although I try to figure out a lot of things myself. I am exited to see what features are to come.

    Thanks again!

    Erika

    #2286165
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.