Hello everyone,
This is the fourth issue of Ghost Tips & Tricks. I will be happy to share with you some practical Ghost tips that I find useful. Brought to you by Aspire Themes .
In this issue, I will share with you how to add a custom tags page to show a list of all your tags. I will use the default Casper theme as an example.
1. Create the Tags Page Theme File
In your theme directory, create a new file and name it custom-tags.hbs and then copy the following code inside it.
{{!< default}}
<header class="site-header">
<div class="outer site-nav-main">
<div class="inner">
{{> "site-nav"}}
</div>
</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'}}
{{#foreach tags}}
<a href='{{ url }}'>
<h2>{{ name }} <small>({{ count.posts }})</small></h2>
</a>
{{/foreach}}
{{/get}}
</div>
</main>
{{/post}}
In this code, the get helper used to get the blog tags. The include attribute used to include the posts count. The order attribute used to order the tags based on the number of posts attached to them.
Next, the foreach helper used to loop through each tag and render the list with the tag URL, title, and the posts count.
At this stage, you may need to do a server restart. This will help the Template dropdown to show up in the next step.
2. Create the Tags Static Page
- Create a new page and call it Tags for example.
- From
Page settings, select the Tags template from the Template dropdown.
- Publish the page.
This is an initial example of what you can do to the tags page. You can take the code further and show the tag image with a custom design.
As an example, you can create something like what I have done with the Krabi and Penang themes.
That’s it for today and I hope you find this useful…
Checkout previous parts of the Ghost Tips & Tricks series:
Also, I started a Ghost Websites Inspiration series share inspiring websites created with Ghost. I hope you can find it inspiring and useful too.
Stay safe!
Ahmad
7 Likes
HI there,
This works really well - but I’d be really interested to know how to show tag images, in the way you describe.
What additions to the code are required for this?
Many thanks,
Andrew
Hey Andrew, inside the foreach you can use something like.
<img src='{{ img_url feature_image }}' alt='{{ title }}'/>
For other tag attributes, check out
Hi Ahmadajmi, I’m sorry I missed your reply, until today. Thanks for this - I’ll give it a try!
Andrew
Is there a way to sort the list of tags into alphabetical order? My list seems to appear in the order of whichever tags I’ve most recently used.
Hi, Yes, you can use. Use you get helper like this
{{#get "posts" limit="5" order="name asc"}}{{/get}}
You will get your tags into alphabetical order
Thanks
Thanks! That worked perfectly.
Bonjour,
Merci beaucoup pour ce tutoriel !
Mais je rencontre un problème dans le code car je ne sais pas ce qu’est “site-nav”, ce qu’il faut mettre à la place : un URL ? un nom de page ? une balise ?..
{{> "site-nav"}}
Merci par avance !
Mihai
BonjourŘŚ
The {{> "site-nav"}} line is part of the Casper theme and it will insert the nav partial here. You don’t have to do anything regarding it.
You can place your page url on Dashboard > Design > Primary Nav
Thank you for your answer. Unfortunately, I use a different theme than Casper (a personal theme: BONSO). I have in the file of the latter a folder called “navigation”. Should I paste the path to last in the “site-nav” code ?
Can i put the page url like that ?
No, you can’t use url like this
so, how can i use it ?
if that is not too much to ask you !
Since you are using a different theme, you need to adapt the code to your theme to have the same layout structure. So, the important code to use from this post is the following.
I think you can duplicate your page.hbs file into custom-tags.hbs and then copy that code where the page content should be.
1 Like
How would I be able to show the posts only related to that tag that is going through the foreach?
<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='posts,count.posts' order='count.posts desc'}}
{{#foreach tags}}
<section class="tags-page">
<div class="inner site-header-content tags-container">
<a href='{{ url }}'>
<div class="tags-header-container">
<img class="post-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, 1000px"
src="{{img_url feature_image size="m"}}"
loading="lazy"
alt="{{title}}"
/>
<div class="tags-header">
<h2>{{ name }}</h2>
<h3>A collection of {{ count.posts }} posts.</h3>
</div>
</div>
</a>
</div>
{{!-- {{#get "posts" limit="all" order="name asc"}} --}}
<div class="post-feed">
{{#foreach posts}}
{{> "post-card"}}
{{/foreach}}
</div>
{{!-- {{/get}} --}}
</section>
{{/foreach}}
{{/get}}
</div>
</main>
When I use your code (it’s commented in my code) it will get all the posts instead of only related to that tag.
I tried to include posts here:
`{{#get 'tags' limit='all' include='posts,count.posts' order='count.posts desc'}}`
Unfortunately it doesn’t return anything in my foreach without using:
`{{#get 'tags' limit='all' include='posts,count.posts' order='count.posts desc'}}`
Then yet again, I’m not in the scope of the tag.
How can I make sure the posts are in the scope of the tag?
This isn’t working for me. Once I follow the instructions, I cannot activate the theme due to the site-nav. Can you help?
Can you post the actual error please?
The Casper theme structure changed since writing this tutorial; use the following instead, and it should work fine.
{{!< default}}
{{#post}}
{{!-- Everything inside the #post block pulls data from the page --}}
<main id="site-main" class="site-main">
<article class="article {{post_class}}">
<header class="article-header gh-canvas">
<h1 class="article-title">{{title}}</h1>
{{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
{{#foreach tags}}
<a href='{{ url }}'>
<h2>{{ name }} <small>({{ count.posts }})</small></h2>
</a>
{{/foreach}}
{{/get}}
</header>
<section class="gh-content gh-canvas">
{{content}}
</section>
</article>
</main>
{{/post}}
