Solo theme: show multiple tags

Themes
1

I’ve been slightly altering the Solo theme to work as a simple personal portfolio site rather than a blog. I’d like to show multiple tags on posts, not just the first post. Anyone have advice on this?

Ideally I’d also like to show the tags under the post title on my homepage, but that’s less important.

2

Unlike your other recent posts that can be solved by code injection, this one is going to require editing the theme files.

@RyanF , it would be nice if the Ghost tutorials collected together the introductory bits of editing a theme. They’re all there, but there’s no way to link the collection that I see.

I suspect there’s a tutorial that’s sort of “what’s the structure of a theme and where do I look for the thing I want to change?”, but I can’t immediately find it. Short answer: You’re looking for post.hbs for the individual post pages. You’re looking for something related to {{tags}} within that file, or it might pull in a partial (looks like {{> "partialname"}} from the partials/ folder.

If there isn’t a tutorial for this already, someone should write one! (Hmm… new blog idea…)

3

Thanks, @Cathy_Sarisky, all good points.

I think the closest thing we have to a tutorial that introduces the structure of Ghost themes is this:

1 Like
4

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
image1823×241 8.1 KB

That’s give you tags under title, remember that you need to style it! :slight_smile:

Then you need to edit post.hbs like @Cathy_Sarisky said and find:

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

Then edit this like previous:

{{#if tags}}
                                {{#foreach tags}}
                                    <a href="{{url}}" title="{{name}}" class="gh-article-tag tag tag-{{id}} {{slug}}">{{name}}</a>
                                {{/foreach}}
                            {{/if}}

image
image1741×507 30.8 KB

Also have on mind that you need to make css style for it ;)

Then make .zip file and upload theme on Your ghost instance.

5

Thanks! Any ideas on how to show the tags on the homepage as well?

6

Thanks! This is really helpful.