Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Static content in query loop

  • Hey,

    I would love to have static content as the first or last item of my GB query loop. Since I am using a slick slider to horizontally show the posts I would like to add at the end a card with some custom content. I already created a block element which I want to show there.

    Maybe easier to understand this way:

    <div class"gb-query-loop-wrapper gb-grid-wrapper gb-query-loop-with-static-content slick-slider">
    	<!-- inject block here -->
    	<div class="gb-query-loop-item gb-grid-column"></div>
    	<div class="gb-query-loop-item gb-grid-column"></div>
    	<div class="gb-query-loop-item gb-grid-column"></div>
    	<div class="gb-query-loop-item gb-grid-column"></div>
    	<!-- or inject block here -->
    </div>

    I am just having trouble getting the custom hook in the right position.

    add_filter( 'render_block', function( $block_content, $block ) {
    	if ( ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'gb-query-loop-with-static-content' ) !== false ) {
    		ob_start();
    		do_action('add_static_content');
    		$t = ob_get_clean();
    		return $t . $block_content;
    	}
    	return $block_content;
    }, 10, 2 );

    This code unfortunately puts my block after every item in the GB query loop.

    Any idea?

  • Hi there,

    render_block will run in each iteration of a post queried.

    Does the static content need to be inside the gb-query-loop-wrapper div?

    What if it’s something like this instead?:

    <div class="gb-container slick-slider">
        <!-- inject block here -->
        <div class"gb-query-loop-wrapper gb-grid-wrapper">
    	<div class="gb-query-loop-item gb-grid-column"></div>
    	<div class="gb-query-loop-item gb-grid-column"></div>
    	<div class="gb-query-loop-item gb-grid-column"></div>
    	<div class="gb-query-loop-item gb-grid-column"></div>
        </div>
        <!-- or inject block here -->
    </div>

    Would your slider still work that way?

    Alternatively, we can use Javascript if you want.

  • Hi Fernando,

    the static content needs to be inside the gb-query-loop-wrapper. Putting the slick-slider class on the parent div would make gb-query-loop-wrapper a slider item.

  • Hi there,

    thats not currently possible.

    I am not sure about slick slider, but check in its arguments whether you can go without the additional HTML, and just set the gb-query-loop-wrapper as the wrapper class. I know its possible with other scripts like flickety.js

  • Hey David,

    I now came across this video:
    [video src="https://p137.p2.n0.cdn.getcloudapp.com/items/E0uLbpol/d80203ee-a4c0-48bb-ad98-ea682303b951.mp4" /]

    He some how managed to do it, can you explain how he did it?

  • It seems he created a custom hook in the query loop, but I don’t know how he did it.

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