How do I show multiple tags on post pages

Developer help
1

Hi,

Using the official Source theme (v1.2.2) on a self hosted ghost instance – I am trying to get the first two tags of each post to show up on post pages, not just the primary tag.

I have seen where the tags get displayed on the posts pages by looking in post.hbs but I am not sure how to modify it.

This is what currently shows:


...

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

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

What I am looking for however, is to show the first two tags, not just the primary one.

I am sorry for having to ask such a simple question, but I am new to Ghost theming, and I am starting off by just modifying one of the official themes.

I have read a lot of stuff online, about replacing the code above with custom code that shows all tags, but that’s not what I want – as my posts often have 4 or 5 tags, I only want to show the primary and secondary ones and nothing I have seen thus far tells me how to only display first two.

Hopefully, some of you would be able to help me with this.

Thanks

:smiley:

Jay

Here are my system details.

System Details:

I am self hosting ghost on a private VPS. My site is accessible via www.jaytelford.me .

  • Ghost Version: 5.82.11
  • Environment: production
  • Node: v18.20.2
  • Database: mysql8 – 8.0.36-2

VPS Details:

  • OS: Ubuntu 24.04 LTS
  • Kernel: GNU/Linux 6.8.0-31-generic x86_64
2

Try read this topic:

3

Look at Theme Helper Tags
You can set
{{tags limit="2“}}
or other like
{{tags from=“2”}}

4

Hi,

Thanks for your reply. Using your reply and the link you gave me to the docs, I have managed to get my tags looking like this:

Screenshot 2024-06-09 at 13.22.10
Screenshot 2024-06-09 at 13.22.101304×636 144 KB


To accomplish the above I used the following in post.hbs


...

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

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

            <div class="post-meta tags-container">
                {{#if tags}} {{#foreach tags limit=" 2" }} <a href="{{url}}" class="gh-article-tag">
                    {{name}}</a>{{#unless @last}}<span class="tag-separator"> | </span>{{/unless}}
                {{/foreach}}
                {{/if}}
            </div>
...

In combination with the following CSS

...

/* CUSTOM STYLES */

/* Add some space between the tags and the title */
.tags-container {
    margin-top: 10px;
    /* Adjust the value as needed */
    margin-bottom: 20px;
    /* Add space beneath the tag container */
}

.gh-article-tag {
    text-decoration: none;
    /* Remove underline */
}

.gh-article-tag:hover {
    text-decoration: none;
    /* Ensure underline is not added on hover */
}

.tag-separator {
    margin: 0 5px;
    /* Apply left and right margins to the separator */
}

Which I have added to the bottom of the screen.css file.

So that works now.

:)

Jay