How to add a page with all tags to the Casper 2 theme for the Ghost CMS

README.markdown

How to add a page with all tags to the Casper 2 theme for the Ghost CMS

Prerequisites

I tested this running Ghost 2.11.1 and the multilingual version of the Casper 2 theme.
My code is based on an older blog post by Aspire Themes on Medium: https://medium.com/aspirethemes/how-to-create-a-tags-list-page-in-your-ghost-theme-7a151413f5b0.

Installation

First, I recommend, you install Casper or the multilingual version linked above using git clone. That way, you can't easily mess things up.

1. Log into your Ghost account and add a new post called Tags. Make sure, it gets the slug tags and mark it as a static page. (See the blog post by Aspire Themes for screenshots, etc.).
2. Go into your ghost theme directory, e.g. cd /var/www/ghost/content/themes/WorldCasper2.
3. Create a new file touch page-tags.hbs and open it to paste in the template below. Save your changes.
4. Go back to your browser and add the styling (see below) to the Tags page using the Code Injection settings.
5. Publish and restart your ghost instance ghost restart.
6. Maybe add a link in your main navigation pointing to your new Tags page.
7. Let me know in the comments if this was of any help to you :)

page-tags.hbs

{{!< default}}
<header class="site-header outer">
  <div class="inner">
    {{> "site-nav"}}
  </div>
</header>
{{#post}}
<main id="site-main" class="site-main outer" role="main">
  <div class="inner">
    <header class="post-full-header">
      <h1 class="post-full-title">{{title}}</h1>
    </header>
    {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
    <div class="tags">
        {{#foreach tags}}
            <a href="{{ url }}">
                <span class="tag-feature-image" style="background-image: url('{{ feature_image }}');">
                    <span class="tag-title">{{ name }} <small>({{ count.posts }})</small></span>
                <span>
            </a>
        {{/foreach}}
    </div>
    {{/get}}
  </div>
</main>
{{/post}}

styles.css

<style>
    .tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .tags > a {
        flex: 1 0 29.333%;
        margin: 2%;
        min-width: 220px;
    }
    .tags span.tag-feature-image {
        display: block;
        padding-top: 100%;
        background-color: #EEE;
        background-size: cover;
        position: relative;
    }
    .tags span.tag-title {
        color: #FFF;
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 2rem;
        font-size: 2rem;
        font-weight: bold;
        text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    }
</style>