How do I show multiple tags on post pages

[JayTelford]

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

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

[AnimaVillis]

Try read this topic:

Solo theme: show multiple tags

Hello! In this case you need to download Your theme. Then edit file loop.hbs Then add under this lane: <h2 class="gh-card-title">{{title}}</h2> Somethink like that: {{#if tags}} {{#foreach tags}} <a href="{{url}}" title="{{name}}">{{name}}</a> {{/foreach}} {{/if}} [image] That’s give you tags under title, remember that you need to style it! Then you need to edit post.hbs like @Cathy_Sarisky said and find: {{#if primary_tag}} <a class="gh-article-tag" href="{{prima…

[joe-blocher]

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

[JayTelford]

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:

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