-
backendguru
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?
-
Fernando
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.
-
backendguru
Hi Fernando,
the static content needs to be inside the
gb-query-loop-wrapper
. Putting theslick-slider
class on the parent div would makegb-query-loop-wrapper
a slider item. -
David
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 -
backendguru
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.
- You must be logged in to reply to this topic.