Ghost Casper v4.7.3 Theme Tags List

Getting a tag listing working with new Casper v4.7.3 theme for Ghost.

Ghost Casper v4.7.3 Theme Tags List

I might just be a bit slow with all this, but I had a bit of an issue getting my tags list page for this site working with the new Casper v4.7.3 theme. If anybody else has the same issue, this is what I did to fix it.

Make a page-tags.hbs file in the content/themes/casper directory that contains the following:

{{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
{{#post}}
{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
    </style>
    <div class="inner posts">
        <div class="post-feed">
            {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
            {{#foreach tags}}
                {{!-- The tag below includes the markup for each tag - partials/tag-card.hbs --}}
                {{> "tag-card"}}
            {{/foreach}}
            {{/get}}
        </div>
    </div>
</main>
{{/post}}

Then make a tag-card.hbs file in the content/themes/casper/partials directory:

<article class="post-card {{post_class}}{{#unless feature_image}} no-image{{/unless}}">
    {{#if feature_image}}
        <a class="post-card-image-link" href="{{url}}">
            <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
        </a>
    {{/if}}
    <div class="post-card-content">
        <a class="post-card-content-link" href="{{url}}">
            <header class="post-card-header">
                <h2 class="post-card-title">{{name}}</h2>
            </header>
            <section class="post-card-excerpt">
                <p>{{description}}</p>
                <p>A collection of {{plural count.posts empty='posts' singular='% post' plural='% posts'}}</p>
            </section>
        </a>
    </div>
</article>

Make sure you have a page published called tags that points to your site/tags or whatever URL you want.

It needs to be cleaned up with some CSS for the tag images to scale more appropriately, but gets the job done for now.