Possible to mark posts [Paid] or [Premium] instead of [Free]?

When I’m making free posts, I would rather have no tag, but when I make paid posts, I would rather have a [Premium] tag on there.

I found the {{visibility}} helper, but how can I make it such that it only displays paid posts?

This is what I’m using in my Penang theme to achieve the same.

<div class='post-visibility post-visibility--{{ visibility }}'>
  <span class='paid'>Paid</span>
  <span class='members'>Members</span>
  <span class='public'>Public</span>
</div>
 .post-visibility span {
  display: none;
 }

 .post-visibility--members .members, 
 .post-visibility--paid .paid, 
 .post-visibility--public .public {
   display: block;
 }
6 Likes

That is quite clever! Thanks.

1 Like

Great solution. Was looking for this. Thanks!

Just a note to other users, the css should be enclosed in <style></style>

1 Like

Thanks. Unfortunately I’m too much of a beginner to make good use of this, so I need a bit more nuanced guidance. A bit of context for how hbs and css work together would also be helpful. I’m clearly in over my head, learning to swim.

I’m also working on the Lyra theme and would like to see labels for ‘paid’ and ‘member’ posts, but leave public posts unlabeled. Assuming I should be editing this section of post-card.hbs, but not exactly sure how to do so correctly:

<header class="post-card-header">
            <div class="post-card-header-tags">
                <span class="post-visibility post-visibility-{{visibility}}">Free Post</span>
                {{#if primary_tag}}
                    {{#primary_tag}}
                        <div class="post-card-primary-tag">{{name}}</div>
                    {{/primary_tag}}
                {{/if}}

            </div>
            <h2 class="post-card-title">{{title}}</h2>
        </header>

How exactly should I edit the above so that ahmadajmi’s solution will work?

No matter where I put this code, I’m getting a single label on every post, regardless of visibility that shows all three labels in one box, like this:

Also, I’ve been editing screen.css with this part, but it doesn’t seem to do anything at all:

Noob level help greatly appreciated!

@natechien
You said you’re over your head so I’m going to go through some low level stuff to try to help. I apologize if it’s things you’ve already got figured out.

Have you gone through this tutorial to setup a local ghost instance for theme development:

And if you are doing that have you run yarn and yarn pretest (or yarn dev) to re-build your css after you made edits?

I want to start there, because staring at the code you’re showing and where you say you’ve been placing things it should be working from what I can tell.

@sunlanterns
Thanks, yes I’ve got a local instance running on my mac to play with themes (re: this thread), and I successfully deployed an instance to a DO droplet so I can actually build the site I want to build.

I’m editing theme files directly on my computer using Sublime Text, and I was basically making & saving changes, stopping ghost, starting ghost and refreshing the site. Changes were reflected, but as I mentioned, not the changes I was hoping for. At some point I realized that changes were reflected by simply saving the changes in Sublime, so I was then just saving and refreshing. Do I need to run yarn after any changes? If so, how do I do that?

@natechien
Yea the handlebars changes go through automatically but the css changes do not unfortunately.
I’m realizing they don’t actually include this piece as a part of the ghost docs proper but the directions for this is here on the casper github:

If you have any trouble following that post back and I’ll try to help.

Instead, you can add it to Ghost Code Injection as:

<style>
 .post-visibility span {
  display: none;
 }

 .post-visibility--members .members, 
 .post-visibility--paid .paid, 
 .post-visibility--public .public {
   display: block;
 }
</style>
1 Like

@ahmadajmi Thanks that worked nicely.

@sunlanters thanks also for your help.

2 Likes

@ahmadajmi @sunlanterns - I finally got my theme development environment working correctly, and have this solution working by editing screen.css and post-card.hbs. Now I’m revisiting this question of trying to hide the visibility tags on public posts. I’m noticing that this solution still leaves public posts with a tag saying “public”.

How might I edit this code so that I could have visibility tags for only one or two types of posts but not the others? I’m pretty green so not able to figure out just by looking at it how to customize this.

If you want to hide the public one, with CSS you can do:

.post-visibility--public { display: none; }

Also, you can remove the markup code which will be:

<span class='public'>Public</span>

Your final code will be:

<div class='post-visibility post-visibility--{{ visibility }}'>
  <span class='paid'>Paid</span>
  <span class='members'>Members</span>
</div>
<style>
 .post-visibility span { display: none; }

 .post-visibility--public { display: none; }

 .post-visibility--members .members, 
 .post-visibility--paid .paid {
   display: block;
 }
</style>
3 Likes

@ahmadajmi thanks!

1 Like

Hey there, if I want all of these types of labels removed, should I just remove the snippet entirely from the source code located at theme/partials/post-card.hbs? I’m using the Penang theme, but I don’t know if I need to clear out more code elsewhere.

You can only remove lines 28 to 32 from the /partials/post-card.hbs