[Support request] Query loop video tutorials

[Sam]

Are there any video tutorials explaining how to use the query loop to set up post archives?

I’m trying to migrate my existing WP show posts elements across to generate blocks but I am struggling to figure out some of the feature.

I know its all there in the setting, and much more, but I am just becoming frustrated trying to figure it out.

I have a 3 x 3 grid displaying posts the 6 most recent posts.

-Feature image
-Title
-Date & category
-Post Excerpt
-Read more Button

How do I….

– Make the ‘read more’ button line-up at the bottom of the post tile – I have currently set a min height (which i know isn’t the best way)
– Add a author mini image/badge
– Can you set image effects, like ‘Zoom’?

[Fernando]

Hi Sam,

We don’t have a video tutorial yet for the Query Loop Block.

Make the ‘read more’ button line-up at the bottom of the post tile – I have currently set a min height

We can set it up through custom CSS.

Add my-container to the Container Block holding the image and the two containers for the texts. Then, add this custom CSS in Additional CSS:

.gb-container.my-container > .gb-inside-container {
    height: 100%;
    display:flex;
    flex-direction: column;
}

.gb-container.my-container > .gb-inside-container > *:last-child {
    margin-top:auto;
}

Add a author mini image/badge

How should this look like?

Can you set image effects, like ‘Zoom’?

Yes, we can set this up through custom CSS as well. However, let’s make sure lining up the read more button works first.

[Sam]

Hi

Thanks for the response and assistance

I am not sure where you are asking me to define that class, the image is within the post template container – here is a screenshot of the structure

With regards the author image, I would like to add a small circle badge-style to near/or above the post meta

Thanks

Sam

[Sam]

Actually I figured it out…sorry I read your comment as adding it to more than one place

Question…I have the post meta (date and category), in a 2×1 grid but this causes both cells to break onto a second line when the screen site decreases (ie tablet)

In the WPShowPost example at the top of the page it looks like the post meta is a one string (concat), so only on the end drops on to the second line (like a normal sentence)

How can I achieve the same but using the query loop

Hope that makes sense?

[Fernando]

Alright. Let’s fix the post meta first.

First, instead of placing the two Headline Blocks in a Grid Block, just place them in one Container Block.

Then, turn the Headline Blocks into Paragraphs and add make-span in the class list of the Headline Blocks.

Then, add this snippet:

add_filter( 'render_block', function( $block_content, $block ) {
    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'make-span' ) !== false ) {
		$myreplace1 = '<p';
		$myinsert1 = '<span';
        $block_content1 = str_replace( $myreplace1, $myinsert1 , $block_content );
		$myreplace2 = '</p';
		$myinsert2 = '</span';
        $block_content = str_replace( $myreplace2, $myinsert2 , $block_content1 );
    }

    return $block_content;
}, 10, 2 );

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

[Sam]

Super – that worked a treat. The only issue is that the newly created string forgets the styling set in headline blocks. Ie font size of 15 and text, link and hover color etc.

But I guess this a case of setting the CSS against them.

Apologies as the questions keep coming so I will list them all – I am sure they will benefit others than are transitioning from WPShowPost

1) Create zoom to feature image
2) Set query loop to show random section from taxonomy
3) Where I have more than one query loop on a page…home page which has a loop per category – prevent the same post appearing more than once
4) How can I create and apply these to my sidebar widget (as per the ones I have currently)

[Fernando]

Try this for the Font styling:

span.make-span > span.post-term-item > a {
    font-size: 15px;
    color:rgba(0,0,0,.5);
}

span.make-span > span.post-term-item > a:hover{
    color:#000;
}
span.make-span > time {
    font-size: 15px;
    color:rgba(0,0,0,.5);
}

Try this CSS for #1:

.gb-query-loop-wrapper > .gb-query-loop-item:hover .my-container .gb-block-image img {
    transform: scale(1.2);
}

.gb-query-loop-wrapper > .gb-query-loop-item .my-container .gb-block-image img {
    transition: transform .5s ease;
}

.gb-query-loop-wrapper > .gb-query-loop-item .my-container .gb-block-image {
    overflow: hidden;
}

Then, as for #2, randomization of posts is available through GB Pro.

#3 – You might need to exclude specific posts in the query to prevent this.

#4 – You should be able to copy and paste the same Query in the sidebar through Appearance > Widgets.

[Author]

Posts