How to display custom tags

Themes
1

Guys can someone lend me a hand to see if I can finish the front end :confused:

I’m trying to display 3 posts of each category like this:

image

Like:

+tech

+nature

so far what I got is the list of tags with the name nature, as an example.

this is the code:

{{#foreach posts}}

{{#get "tags" limit="1" filter="slug:[nature]"}}

{{#foreach tags}}

   <h4 class="title"><a href="{{url}}">{{name}}</a></h4>

{{/foreach}}

{{/get}}

{{/foreach}}

How can I accomplish the above please?

I read this: Get Primary Tags List - #2 by Hannah
and this: Ghost Handlebars Themes - Building a custom Ghost theme - Docs

It’s for the index page

Thank you

1 Like
2

I feel like everytime I post something I answer to muself lol, maybe not enough time, anyway, this is not on the forum like this anywhere so it’s worth adding, for another front-end noob like me :stuck_out_tongue:

This is how you can get your posts with a specific tag:

{{#get “posts” filter=“tags:nature”}}

{{#foreach posts}}

<h3>

<a href="{{url}}">{{title}}</a>

<span class=“main-time”>

<time class=“post-date” datetime="{{date format=‘YYYY-MM-DD’}}">{{date format=“DD MMM YYYY”}}</time>

</span>

</h3>

{{/foreach}}

{{/get}}

It has no formating, but the main idea works. Hope it helps :slight_smile:

pd: here is the same result with formating:

image

3

I have another solution that might be useful:

{{#get "tags" limit="all" include="count.posts" filter="slug:[getting-started, tag-test]"}}
    {{#foreach tags}}
        {{#if count.posts}}
        	<h3>{{name}}</h3>
        	{{#get "posts" filter="tags:{{slug}}" limit="3"}}
        		{{#foreach posts}}
            		{{title}}
        		{{/foreach}}
        	{{/get}}
        {{/if}}
    {{/foreach}}
{{/get}}

This way you make sure that if your tag doesn’t have any posts you don’t show the tag title in there. Like you have in your picture for Nature and Advertising.

4 Likes
4

thanks, good call

5

@HauntedThemes I just noticed bro, you are repeading your code (2 foreach), just for better time complexity, I would put it this way:

<div class="item featured-top">
    <h3 class="title bordered uppercase">Technology</h3>
    <div class="box">
        {{#get "posts" limit="4" filter="tags:technology" as |technology|}}
            {{#foreach technology}}
			 {{#if featured}}
                <article class="{{post_class}}">
                    <time class="uppercase" datetime="{{date format='YYYY-MM-DD'}}"><i class="fa fa-clock-o"></i> {{date}}</time>
                    <h4 class="title"><a href="{{url}}">{{title}}</a></h4>
                </article>
				 {{/if}}
            {{/foreach}}
        {{/get}}
    </div>
</div>

I also added the featured post in case someone wants it

1 Like
6

I’m not repeating my code at all. First foreach is for tags and the second one is for posts.

  1. “just for better time complexity”. Not at all. You code is hard to maintain. If you want to do that for 10 tags you have to copy paste that code 10 times. Not good. This is why I did a get for tags and filter just the ones that I need. I would rather change a small array of slugs than copy paste a huge amount of code.
  2. The way you check for featured posts is wrong. If you have 10 posts and in the first 4 there are no featured posts but in the remaining 6 you have some, your code will not display anything because you verify if the post is featured after you fetched it. Your get should be:
    {{#get "posts" limit="4" filter="tags:technology+featured:true" as |technology|}}
    and without {{#if featured}}.

I encourage you give my version a chance and see that is easier to work with. You can just test it a little bit and see if you are confortable with it. It’s your code so you can delete it if you don’t want to use it anyway.

1 Like
7

yeah true, I would have to copy the code jeje but for a huge db I guess it would be better than having 2 nested loops which is n^2. Anyway, I like your way because in my case that difference will happens in milliseconds, and I don’t have to repeat it. :+1:

Edit: I ended up using yours, thanks bro @HauntedThemes :+1:

8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.