Post Type Icons

Hi,

I am hoping to use an if/else statement to show a post type icon next to the title for members & paid members posts.

This is the code I am currently using, but unfortunately, it isn’t showing the icon, just showing the title.

{{#if @visibility.paid}}
     <i class="now-ui-icons objects_diamond text-primary"></i> {{title}}
{{else if @visibility.member}}
    <i class="now-ui-icons users_circle-08 text-primary"></i> {{title}}
{{else}}
    {{title}}
{{/if}}

I’ve tried it without the ‘@’ and I’m getting the same results.

I have also tried renaming the icon class to “paid” or “member”, then using {{visibility}} and that isn’t working either.

e.g.

<a href="{{url}}">
    <i class="now-ui-icons {{visibility}}"></i>{{title}}
</a>

If I just put the icon in, it works, but as soon as I add any logic it doesn’t. What am I doing wrong?

I don’t think there is a @visibility.paid or @visibility.member helpers, that’s why you will always get the last condition which is only the title.

Your last example should output something like:

<i class="now-ui-icons paid"></i>

Depends on how the icons are working and as you said you can rename the icon to something like paid, I think it should work this way.

Hi @Izak_Jackson

Try this code:

<style>
.icons {
	display: none;
}

.icons-public.public,
.icons-members.members,
.icons-paid.paid {
	display: block;
}
</style>

<a href="{{url}}">
	<i class="icons icons-public {{visibility}}"></i>
    <i class="icons icons-members {{visibility}}"></i>
    <i class="icons icons-paid {{visibility}}"></i>
    {{title}}
</a>

I thought that might have been the case.

Yeah, with the {{visibility}} I have set the icons to those names but still no luck, unfortunately.

I’ll give this a try, thanks

You are probably looking for @member. So try this:

{{#if @member.paid}}
     <i class="now-ui-icons objects_diamond text-primary"></i> {{title}}
{{else if @member}}
    <i class="now-ui-icons users_circle-08 text-primary"></i> {{title}}
{{else}}
    {{title}}
{{/if}}

That was my initial thoughts, but this just shows the “paid” icon to people who are logged in as a paid member, and shows the “member” icon to people logged in as a member.

If someone is logged out, it only shows the title.

Still not having any luck. This is my code block on my homepage for displaying posts tagged with “blog”

{{#get "posts" limit="6" filter="tags:blog"}}
{{#foreach posts}}
     <div class="col-md-6">
         <div class="card card-plain card-blog d-flex align-items-stretch">
             <div class="card-image">
                 <a href="{{url}}">
                     <img class="img img-raised rounded" src="{{feature_image}}" alt="{{title}}" />
                 </a>
             </div>
             <div class="card-body">
                 <h6 class="text-primary"><span class="text-dark">Published:</span> <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time></h6>
                 <h5 class="card-title">
                     <a href="{{url}}">
                         <i class="now-ui-icons {{visibility}}"></i>{{title}}
                     </a>
                 </h5>
                 <p class="card-description">
                    {{excerpt characters="140"}}...
                    <br>
                    <a href="{{url}}" class="btn btn-primary">Read More</a>
                </p>
            </div>
        </div>
    </div>
{{/foreach}}
{{/get}}

I’ve also noticed an issue where the post excerpt won’t limit to x amount of characters. Not sure if these issues are related.

I’ve tried outputting {{visibility}} in a paragraph tag and it doesn’t show anything.

Regarding the {{visibility}} issue, I need to see your package.json file content.

{
  "name": "volta-media",
  "version": "1.5.0",
  "description": "A theme for Volta Media.",
  "engines": {
    "ghost": ">=1.0.0",
    "ghost-api": "v2"
  },
  "keywords": ["ghost-theme"],
  "author": {
    "email": "izak@voltamedia.co",
    "name": "Izak Jackson"
  },
  "config": {
    "posts_per_page": 6
  }
}

Change "ghost-api": "v2" to "ghost-api": "v3". Restart the Ghost server and it should work.

Thank you for the help! It’s all working fine now. Knew I’d have overlooked something simple.

1 Like

That’s great to hear, much welcome!

1 Like