How to show all tags on a page in massively theme

Developer help
1

If you’re looking for some help, it’s important to provide as much context as possible so that people are able to assist you. Try to always mention:

  • What’s your URL? This is the easiest way for others to debug your issue
    https://www.amitbondwal.com/

  • What version of Ghost are you using?
    root@openvpn:/var/www/ghost/amitbondwal.com/content/themes/Massively-master# ghost -v
    Ghost-CLI version: 1.13.1

  • What configuration?
    Installed on Ubuntu 18.04,

  • What browser?
    all browser

  • What errors or information do you see in the console?

  • What steps could someone else take to reproduce the issue you’re having?
    fresh installation

Hi All,

I just start using ghost and exploring it, so sorry for noob question in advance. I want to display all tags on /tag page. As a newbie, I am not able to figure out where to make changes and in which file, I search and found a lot of people sharing foreach to display tags, not sure in post.hbs file or some custom_tag.hbs etc.

But I did not find info, in which file I need to make changes, and where, Or I am doing it poorly. So I need your help, it would be great if you guys can guide me to that direction, or share some document link, where I can start learning ghost by making these changes or can understands which file need to change for that.

–
BR

Amit Bondwal

2

To create a new page, you need to declare it in your routing file. You can download this from Ghost Admin > Labs > Routes (routes.yaml).

After downloading it, under routes, you want to add something like this:

routes:
  /signup/: members/signup
  /signin/: members/signin
  /account/: members/account
  /tag/: tags

Basically, add the tag routes to use a tags.hbs file that you will create. This will let Amit Bondwal use your tags.hbs template.

Create a new file called tags.hbs in the root of your theme folder (you can download the theme from Design > Themes).

In there, copy in your default page template from page.hbs, then add the foreach loop for tags that look like this:

<main id="site-main" class="site-main outer tags-content-container">
    <div class="inner posts">
        <div class="post-feed tag-container">
            {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
            {{#foreach tags}}
            <a class="post-card tag-card-container" href="{{ url }}">
                {{#if feature_image}}
                <img class="post-card-image tag-card-image" 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="(max-width: 1000px) 400px, 700px"
                    src="{{img_url feature_image size="m"}}" alt="{{name}}" />
                <h2 class="tag-name">{{ name }} ({{ count.posts }})</h2>
                {{/if}}
            </a>
            {{/foreach}}
            {{/get}}
        </div>
    </div>
</main>

Here, we first use the get helper to get all the tags as well as the number of posts under each tag, and then the foreach helper to display the info for each tag. You can then add css to style as you like.

2 Likes
3

Hi chenningg,

Thanks you very much for this all help, I am able to print tags on /tag page.
I would like write issue which I have faced after this too, so if somebody else is searching for this, can get help.

  1. downloading of route.yml and then edition and uploading of file again, did not work, may be the permission issue of my self hosting, So I change it directly on the server(take the backup of original file first), at file location. /var/www/ghost/amitbondwal.com/content/settings/routes.yaml, file content become like this.
routes:
  /tag/: tags
collections:
  /:
    permalink: /{slug}/
    template: index
taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/
  1. I already have created a tag page with /tag url, as you mentioned
  2. restart ghost service and nginx.
  3. As you said I tried to copy page.hbs file as it is in tags.hbs and try to change file inside content only with foreach section, I tried a lot of option but it did not. work. Then I remove the POST from top and last, then my file content become like below, which is working now.

{{!< default}}

    <header class="major">
        <h1>Tags</h1>
    </header>

    {{#if feature_image}}
    <div class="image main"><img src="{{img_url feature_image}}" alt="{{title}}" /></div>
    {{/if}}

    <div class="content">


          {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
{{#foreach tags}}
{{#if feature_image}} {{name}}

{{ name }} ({{ count.posts }})

{{/if}} 
{{/foreach}}
{{/get}}



    </div>

</section>
  1. Restart ghost and nginx service again.

Thanks you very much for your help.

–
BR

Amit Bondwal

4

Glad to help (: Uploading the routes.yaml file via Ghost Admin should work most of the time without needing to restart Ghost. Do you have any error logs for why the upload failed?

Additionally, yes you need to remove the {{post}} because you are creating a custom page that does not draw a post’s data, but rather data from tags through {{get}}.

5

Hi Chnningg,

I did not take screenshot of error of uploading of route.yml. So I don’t have that now.
One again thank you very much. You can close this case.

–
BR

Amit Bondwal