Creating a Page with text + list of posts by tag

Themes
1

Hi there!

I’m a newbie on Ghost and I’m trying to build my own template (brave / stupid idea to begin working with Ghost I guess…) and I’m frustrated with one idea I have on my mind…

So I want to be able to create a page, build that page with content and dynamically I want to add in the bottom a list of the posts by a certain tag.

P.Ex. I want to build a page called “id” that will contain a post introducing that topic and underneath a list of posts (or better the link for the posts) that are under the tag #identity
Then I want to have this under blog.domain.com/id/ which will be specified on the navigation.

I’m a bit confused with the routing (maybe the routing answer this) but definitely I need to build a template that will include the post/page and the list of tags, right?

Can someone help me organizing this?

Thanks!

2

I’ve tried a mix of route / collection:

collections:
  /:
    permalink: /{slug}/
    template: index

  /id/:
    permalink: /id/{slug}/
    template: page-identity
    filter: primary_tag:identity
    data: page.identity

with a page-identity.hbs but no luck… I can’t load the post of the page identity before the #tag…

it shows me the posts list but not the page content :frowning:

Help! :'(

3

I feel like I just reinvented the wheel…

So I created a new index-identity.hbs with the following content:

{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}

{{!-- Main --}}

{{!-- Featured Post --}}
{{#is "id"}}
{{#get "posts" filter="featured:true+title:'Identity'" limit="1" as |featured_post|}}
    {{#foreach featured_post}}
        <article class="post featured">
            <header class="major">
                <span class="date">{{date format="MMMM D, YYYY"}}</span>
                <h1>{{title}}</h1>
                {{#if custom_excerpt}}
                    <p class="content">{{custom_excerpt}}</p>
                {{/if}}
            </header>

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

            <div class="content">
                {{content}}
            </div>
        </article>
    {{/foreach}}
{{/get}}
{{/is}}

{{!-- Posts --}}
<section class="posts">

    {{#foreach posts}}
    <article>
        <header>
            <span class="date">{{date format="MMM D, YYYY"}}</span>
            <h2><a href="{{url}}">{{title}}</a></h2>
        </header>
        {{#if feature_image}}
        <a href="{{url}}" class="image fit"><img src="{{img_url feature_image}}" alt="{{title}}" /></a>
        {{/if}}
        <p>{{excerpt words="33"}}</p>
        <ul class="actions special">
            <li><a href="{{url}}" class="button">Full Story</a></li>
        </ul>
    </article>
    {{/foreach}}

</section>

{{!-- Pagination --}}
{{pagination}}

Then I changed the routes file:

routes:

collections:
/:
permalink: /{slug}/
template: index
filter: tag:-identity
/id/:
permalink: /id/{slug}/
template: index-identity
filter: tag:identity

taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/

Finally I created a post with the title Identity and… Violà!

However, still need to format properly the list as cards won’t do what I need / expect really…
And if someone has any suggestion to improve this big mess I’ve done, please feel free to ping me :slight_smile:

4

Glad you got it working! Can I ask if you made a page in the admin with the slug of identity when you tried this method?

Using the page-{slug}.hbs way of creating templates should correspond with the page slug names in your Ghost admin. It’s then just a matter of using things like {{content}} to expose the page content / data. You wouldn’t have to use #get either as the page context would already be there and the collection of post types would already be there too :fire:

1 Like
5

Sorry for my delay in getting back to you David, appreciate you replying to my message and giving me an explanation about the {{content}} part. As the noob that I am, still learning the ropes of Ghost it really helps to have someone giving some pointers!

In the end I only placed the title of the post / page in the filter condition as I do not want the page / post to appear as well on the list of articles underneath.

I did tried with the slug of identity but then it would appear underneath and that was not what I wanted, so I focused on the title only and made that as “featured page”.

I’ll test with the {{content}} call in order to be able to format the list of tags under :slight_smile:

Thanks once again for your reply!

1 Like