Either pagination or infinite scrolling for microblog

Developer help
1

Hi. I’ve got a page up at The Noblest Act (Page 1) with the following custom handlebars file. Right now I’m literally loading the full content of the posts with the relevant tag on that page. What I want is a page that displays the full content of these relatively short posts and either 1) has the pages loaded in groups of 5 or 10 or whatever (adjustable to my preference) with navigation links to the next/previous bunch of mini posts OR 2) infinitely scrolls, loading the full content of the posts as you scroll down. Is there an easy way to do this on the latest casper theme?

{{!< default}}

{{#get "posts" limit="all" filter="tags:microblog"}}
    {{#foreach posts}}

    <article class="article {{post_class}}">

        <header class="article-header gh-canvas">

            {{#if primary_tag}}
            <section class="article-tag">
                <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
            </section>
            {{/if}}


              <h1 class="article-title">
                {{#link href=(url)}}{{title}}{{/link}}
              </h1>
              {{#if custom_excerpt}}
              <p class="article-excerpt">{{custom_excerpt}}</p>

            {{/if}}



            <div class="article-byline">
                <section class="article-byline-content">
                    <ul class="author-list">
                        {{#foreach authors}}
                        <li class="author-list-item">
                            {{#if profile_image}}
                            <a href="{{url}}" class="author-avatar">
                                <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
                            </a>
                            {{else}}
                            <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
                            {{/if}}
                        </li>
                        {{/foreach}}
                    </ul>
                    <div class="article-byline-meta">
                        <h4 class="author-name">{{authors}}</h4>
                        <div class="byline-meta-content">
                            <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD hh:mm A"}}">{{date published_at format="MMMM DD, YYYY hh:mm A"}}</time>

                        </div>
                    </div>
                </section>
            </div>

            {{#if feature_image}}
            <figure class="article-image">
                {{!-- This is a responsive image, it loads different sizes depending on device
                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
                <img
                    srcset="{{img_url feature_image size="s"}} 300w,
                            {{img_url feature_image size="m"}} 600w,
                            {{img_url feature_image size="l"}} 1000w,
                            {{img_url feature_image size="xl"}} 2000w"
                    sizes="(min-width: 1400px) 1400px, 92vw"
                    src="{{img_url feature_image size="xl"}}"
                    alt="{{title}}"
                />
            </figure>
            {{/if}}
        </header>


        <section class="gh-content gh-canvas">



            {{content}}
        </section>

        {{!--
        <section class="article-comments gh-canvas">
            If you want to embed comments, this is a good place to paste your code!
        </section>
        --}}

    </article>


    {{/foreach}}

{{/get}}
2

Anyone have any thoughts about this?

3

It’s not easily possible to paginate with the get helper. A better bet is to set up a custom route that filters on microblog.

From there, you can either use the pagination helper or implement infinite scrolling.

Here are the docs for the pagination helper: Ghost Handlebars Theme Helpers: pagination

Setting up infinite scroll is a bit more complex. We have an example of it in our Starter theme: Starter/infiniteScroll.js at main · TryGhost/Starter · GitHub

2 Likes
4

Thanks Ryan.

One reason I was trying to use get is to pull in the full content of the microblog posts on the microblog page. It’s not obvious to me how to do that just by filtering on a tag using routes.yaml. I can pull up a list of posts doing filtering, but not their content.

The other issue is how to set the threshold for how many posts are on a page that’s limited in scope to just the microblog page and not doesn’t affect the rest of the site. I can see how to do that with get using limit, but not with this alternative way.

5

I removed my microblog.hbs file and just turned my microblog page into another index page for the time being until i can figure out how to get it the way i want