Using read-next-card as index page organization


#1

So I’m not sure this is going to be possible, and I haven’t been able to puzzle it out myself.

I setup a ghost instance to use as a place to host articles, which is pretty standard. However, my index page is currently just a dense wall of text, split between the ~20 articles we have posted currently.

Looking at a specific post, it has the read-next-feed at the bottom of the page, where it grabs the current tag, and lists out articles with the same tag, as well as a link to view all articles with that same tag. I thought that would be a pretty good organization setup for the main page, where a user can check out the tag groupings, and dive deeper from there.

For the life of me however, I cannot get that function replicated onto the main page.

Using

            {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}

            {{#get "tags" }}
            {{#foreach tags}}
            {{#get "posts" limit="3" as |related_posts|}}
                {{#if related_posts}}
                <article class="read-next-card"
                    {{#if ../primary_tag.feature_image}}
                        style="background-image: url({{../primary_tag.feature_image}})"
                    {{else}}
                        {{#if @blog.cover_image}}
                            style="background-image: url({{@blog.cover_image}})"{{/if}}
                    {{/if}}
                    <header class="read-next-card-header">
                        <small class="read-next-card-header-sitetitle">&mdash; {{@blog.title}} &mdash;</small>

                        <h3 class="read-next-card-header-title"></h3> {{!--Tag Title for Card --}}

                    </header>
                    <div class="read-next-divider">{{> "icons/infinity"}}</div>
                    <div class="read-next-card-content">
                        <ul>
                            {{#foreach related_posts}} {{!--Pull related post by tag--}}
                            <li><a href="{{url}}">{{title}}</a></li>
                            {{/foreach}}
                        </ul>
                    </div>
                    <footer class="read-next-card-footer">
                        <a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}} →</a>
                    </footer>
                </article>
                {{/if}}
            {{/get}}
            {{/foreach}}
            {{/get}}

on the main page gets me close, where it has the correct number of read-next-cards, but it lists all the articles of every tag on every read-next-card. It also does not list the primary tag of each card, which I’m assuming is related to not filtering posts by tag.

Speaking of filtering, the page.hbs card section does include

{{#get “posts” filter=“tags:{{primary_tag.slug}}+id:-{{id}}” limit=“3” as |related_posts|}}

but if I include that filter in index.hbs, I get Validation Errors in the Ghost log in ghost-cli. I looked at the filter page of the api, but was not able to glean anything useful.

At this point, I’m assuming my issues are many, but I’m hoping someone more competent can look at this and point me in the right direction,

Thanks