Post Type Icons

Memberships & subscriptions
1

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?

2

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.

3

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>
4

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.

5

I’ll give this a try, thanks

6

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}}
8

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.

9

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.

10

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

11 
{
  "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
  }
}
12

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

13

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

1 Like
14

That’s great to hear, much welcome!

1 Like
15

Hi Guys,

I was trying to do the same with fontawesome - but for some reason, I only get a box on the free posts, and nothing on the paid posts → https://zencapita.com/

16

Managed to solve the issue guys. Please note that if you’re using the fontawesome CDN - they do not support the latest version of the fonts (strangely, they’re using 4.7 ver). Which also means that that using “fa” instead of “fas” will cause blank squares.

Best to use the following in header:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

And replace your post-title tag with:

<a href="{{url}}"><small><i class="fas fa-unlock {{visibility}}"></i></small><small><i class="fas fa-lock {{visibility}}"></i></small><small><i class="fas fa-wallet {{visibility}}"></i></small>{{title}}</a>

And in the css, add the following style:

<style> .fas {display: none;} .fa-unlock.public, .fa-lock.members, .fa-wallet.paid {display: inline;color:#AAA;} </style>

Hope someone found it useful!

P.S. If someone knows how to minimise fontawesome - so I can reduce the loading time, please do share.

1 Like
17

I know it may not be what you’re after, but my solution to reduce loading times was to get rid of Font Awesome altogether and use SVGs placed in .hbs files instead (and more importantly, to transfer image characters of a font I had the rights to to SVGs, since loading fonts – especially images in fonts – can be problematic in several ways).

I don’t want to steal Font Awesome’s icons, so I’ve instead used https://www.iconfinder.com/ (there’s many other sites like it) to buy SVGs for a dollar or two (or even free). I use a code editor to slip SVG data into .hbs files (which go in the /partials directory or a subdirectory in /partials), then call those .hbs files in the file(s) where I want them to appear.

1 Like
18

Thanks - I didn’t notice much increase in the load time through GTmetrix. Can you share your solution (code) - others in the community might benefit from it as well.

I was thinking of using just css to label - free/subscriber/member posts.

19

what theme are you using for the site? looks neat.

20

Thanks - modified version of Royce - Just Good Themes