[Support request] Query loop pagination, any way to reload in place if a query loop is lower down?

[Gary]

Hi Support

I have a GB query loop on a standard page which requires pagination and is used further down below the fold on this particular page. The pagination works but it naturally returns the user to the top of the page which takes the user out of the flow of scanning through articles and requires them to scroll further down the page again. I was therefore wondering if there’s any way I could deal with this currently?

Thinking maybe a filter or something that I could utilise to adapt the default pagination block to return them to the same anchor point on the page?

Thanks

[Ying]

Hi Gary,

Can you link me to the page?

[Gary]

Hi Ying

Thanks for the reply, I’ve supplied the link to page in question in the private info.

[Tom]

Hey Gary,

We might be able to do something… Let’s try this:

1. Give your Next button a custom class. Something like: custom-next
2. Add this PHP:

add_filter( 'generateblocks_dynamic_url_output', function( $url, $attributes ) {
    if ( ! empty( $attributes['className'] ) && 'custom-next' === $attributes['className'] ) {
        $url = $url . '#my-loop-id';
    }

    return $url;
}, 10, 2 );

3. Add a Container (or any element) around your loop, and give it the ID you specified in the function: my-loop-id

Let me know if that works or not 🙂

[Gary]

Hi Tom

Thanks so much for looking in to this. I’ll give the suggested code a try and let you know if it works.

Cheers

[Gary]

Hi Tom

This worked really well, I just tweaked your original snippet slightly so that it also checks whether the url has a value. Without this the previous & next links were still being filtered at the beginning or end of the loop and being shown rather than hidden:

add_filter( 'generateblocks_dynamic_url_output', function( $url, $attributes ) {
    if ( ! empty( $url ) && ! empty( $attributes['className'] ) && 'custom-prev-next' === $attributes['className'] ) {
        $url = $url . '#blog-posts';
    }
    return $url;
}, 10, 2 );

It also didn’t work with the pagination numbers for some reason? So I removed those and just had previous/next links which is fine for my use case but thought I should mention that in case anyone else is looking to do something similar.

Thanks again 🙂

[Tom]

No problem! I’m glad it worked. I’ll take a look to see why it didn’t work with the numbers – this seems like a useful feature to include in the plugin.

Thanks!

[Friedhelm]

Dear Tom,

I also have 2 query loops on one page. It will soon be my home page (see test page). The loop below needs the pagination block, so I also included Gary’s snippet (so that the visitor clicks on to the beginning of the loop), it works quite well so far. But with my more than 1000 posts, you should also get to the beginning of the loop when you click on the page numbers.

I would really appreciate it if this function was added to the query loop in the next update. Do you perhaps have an idea how the above snippet could be supplemented in the meantime?

I would be pleased if you would deal with this topic again.
Sending greetings from Berlin

[David]

Hi there,

the Query Loop Post Navigation is made of 3 blocks: Previous, Pagination and Next – if you give each of them the same custom class Eg. ‘jump-link’

then you can use the one filter to target that class to add the jump link:

add_filter( 'generateblocks_dynamic_url_output', function( $url, $attributes ) {
    if ( ! empty( $url ) && ! empty( $attributes['className'] ) && 'jump-link' === $attributes['className'] ) {
        $url = $url . '#blog-posts';
    }
    return $url;
}, 10, 2 );

[Friedhelm]

Dear David,

Unfortunately, the snippet does not work as intended with “pagination”: For example: anchor “blog-post”, loop is on page 5:

With mouse over the link appears:
at Previous: ……. /?query-e222b277-page=4&cst#blog-posts
at pagination: … /?query-e222b277-page=6&cst
at Next: …………. /?query-e222b277-page=6&cst#blog-posts

In the case of pagination, the information on the anchor is missing; that means here there is no jump to the anchor, but the jump to the top of the page (although all 3 blocks: Previous, Pagination and Next have the same CSS class “jump-link”). (see test page)

So I would like to ask you again: Do you perhaps have an idea how the above snippet could be supplemented? I would be happy if you would find a solution.

[David]

Ok, for the pagination buttons only try this instead:

add_filter( 'generateblocks_dynamic_url_output', function( $url, $attributes ) {
    if ( ! empty( $url ) && ! empty( $attributes['className'] ) && 'paging-jump-link' === $attributes['className'] ) {
        $url = $url . '&var=var#blog-posts';
    }
    return $url;
}, 10, 2 );

Note the class for the paging buttons has been updated in the code to paging-jump-link

[Friedhelm]

Dear David,
I was hoping, but unfortunately the snippet for the pagination buttons doesn’t work either. It is the same result as described in my last post (see there). Do you perhaps have another idea?

[David]

Sorry – i just wasted your time.
That filter isn’t present on the paging buttons. So thats why it don’t work…. apologies twice as we don’t have a solution apart from resorting to Javascript

For now you would have to disable the pagination ….

[Friedhelm]

OK, David, thank you for your efforts. Then I have to live with it for the time being.

I would appreciate it if you found a solution for the pagination buttons in the next update: make it possible to jump to the beginning of the loop.

[David]

Its on our list 🙂 We’ll look to resolve asap!!

[Author]

Posts