Turning off or changing pagination?

Themes
1

I thought I had my ascending pages cracked - the following tag.hbs snippet appeared to work perfectly

<main id="site-main"  class="site-main outer" role="main">
    <div class="inner">
        <div class="post-feed">
            {{#tag}}  
                {{#get "posts" limit="all" filter="primary_tag:{{slug}}" order="published_at asc" }}
                    {{#foreach posts }}    
                        {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                        {{> "post-card"}}
                    {{/foreach}}
                {{/get}}  
             {{/tag}}   
         </div>
    </div>
</main>

However if I scroll down to the bottom of a page with > 25 posts (25 is assume is the default page size) then I get all the posts a second time and so on until all pages are exhausted e.g if I have 31 posts then scrolling to the bottom I’ll see them all a second time but scrolling to the bottom again they don’t get repeated a 3rd time. My page with 77 posts gets all 77 repeated 4 times if I keep scrolling downwards.

{{pagination}} doesn’t work with get and I can’t simply add page=pagination.page to my {{#get}} request. I know I can add {page="1"} but don’t believe I can increment this inside a hbs file.

Is it possible to simply turn off pagination or change the page size dynamically to ../pagination.total?

You can probably guess I’m new to handlebars.

2

The limit="all" should fetch all of the posts, if it’s not doing that then there may be a bug :speak_no_evil:

If you want to disable pagination on your tag pages then you can move this section from the default.hbs layout (which applies to all pages) to only the templates you want pagination on such as index.hbs and author.hbs:

{{#if pagination.pages}}
    <script>
        var maxPages = parseInt('{{pagination.pages}}');
    </script>
    <script src="{{asset "js/infinitescroll.js"}}"></script>
{{/if}}
3

Thanks Kevin - I’ll try that tomorrow

limit="all works fine and returns all posts. For example in my longest trip blog it returns all 77 posts correctly. All is good! BUT if I scroll down past the last post the {{#get}} gets triggered again and all 77 posts get displayed a 2nd time on the page - it does this a further 2 times and then trying to scroll past the end produces no further hits.

What appears to be happening is that my page has a post size of 25 (the default) but {{#get}} with limit=all returns (correctly 77 posts). However scrolling to the bottom invokes the paging mechanism a further 3 because it seems to have only ‘ticked off’ 25 posts.

Simply changing the {{#get}} to limit=25 honours the paging mechanism but each page-down simply gets the very first 25 posts so the fully scrolled page consists of 3 copies of the first 25 posts and the first 2 posts repeated a 4th time.

So adding the page option to my {{#get}} would work but I don’t think I can programatically increment the page value - I had hoped adding page=pagination.page to the {{#get}} would work but this merely proves the accuracy of the documentation when it says pagination and get don’t work together :slight_smile:

Hopefully channels will make this much simpler.

4

Brilliant Kevin - thanks again. Turning off paging and using {{#get}} with limit="all" works perfectly for my purposes.

FYI in order to keep the changes local and not run the risk of inadvertently propagating errors I created a new defaultnopage.hbs with paging removed and then changed tag.hbs to insert that rather than the standard default.hbs

Thanks again for taking time to help with this - it has also provided me with valuable handlebars education so much appreciated.

1 Like
5

Hopefully channels will make this much simpler.

So yeah, with dynamic routing it will be possible to filter posts for a specific collection url without needing the {{get}} helper. So you can show posts with a primary tag x on a specific url. The collection is then automatically paginated - default behaviour.

But if you want to implement infinite scroll and load the paginated posts of this url, you either run into the same problem with the {{get}} helper and the page parameter or you have to implement something like https://github.com/TryGhost/Casper/blob/master/assets/js/infinitescroll.js.

and I can’t simply add page=pagination.page to my {{#get}} request

Yeah this is because as soon as you load your page, pagination.page get’s specific value e.g. 1. But the value does not get updated when scrolling - it stays 1.

6

Hey @Kevin, I am using the Editorial theme for my website.

When I set limit="all" in my index.hbs and tag.hbs scripts but it does not seem to work. I only shows a maximum 6 posts (even when I have more than 12 posts). Also, it worked correctly when I tried doing limit="3" in those pages but not when I did limit="8" or limit="9".

Also, my default.hbs does not have the code that you mentioned above that I can remove to disable pagination.

I do not want pages for my content - just one scrollable page. Can you (or someone else) please help me with it?

7

Found the fix.

So, the limit="all" setting was being overruled by the posts_per_page setting in package.json (which was set to 6)! So setting that to a large number (I set it to 51) worked for me.

1 Like