Organize your blog, newsletter or content site with Array10% OFF

How to Use the Public Preview & Custom Content CTA in Ghost CMS

Tips on how to use the Public Preview divider in Ghost 5.0 and how to add your own content CTA. Advanced guide for fading content CTA for the Ghost CMS modifying your Ghost theme template.

Norbert
Norbert3 min read

Starting with Ghost 4.0 one of the new features is the the public preview card/divider which can be used on any post or page to make some part of the content public (visible to everyone), and the rest of the content visible for free or paid members (visible to logged-in members).

In Ghost 3.0 some Ghost themes had a hard coded (in most cases blurred) text when users did not have access to that post, now this new feature makes this much easier and at the same time much more flexible as you can choose how much of your content is visible to the public and it can be done individually for every post.

Basic usage of the Public Preview

You can select the public preview option from the card menu in the editor to insert the divider:

Ghost CMS public preview
Ghost CMS public preview

Useful tip: typing === on a new line also works

You can also drag the divider to move it and set the public content as needed. The Public Preview divider only makes sense for posts that are either for free members or paid members, this can be set at post level, in Settings > Post access.

Posts set to Members only display content after the divider to all logged-in members. Posts set to Paid-members only display content after the divider to logged-in members with an active paid subscription.

Advanced usage of the Public Preview

You can implement some changes at the theme level, modifying the template files and create a custom CTA for users without access as well as a fading effect on the visible content.

By default the {{content}} helper in post.hbs displays the part of the post that is set as public and a default call-to-action that comes with Ghost CMS.

You can overwrite the CTA by creating a new file in the partials folder called content-cta.hbs

An example, how that file might look like:

{{! Post Access CTA }}
<div class='post-access-cta p-lg text-center {{visibility}}'>
  <h3>{{t 'Read the full story'}}</h3>
  {{#has visibility='members'}}
    <p class='text-acc-3'>
      {{t
        'Sign up now to read the full story and get access to all members-only posts.'
      }}
    </p>
  {{/has}}
  {{#has visibility='paid'}}
    <p class='text-acc-3'>
      {{t
        'Sign up now to read the full story and get access to all paid posts.'
      }}
    </p>
  {{/has}}
  <a class='btn btn--brand btn--rounded m-b' href='/signup/'>{{t
      'Subscribe'
    }}</a>
  <div class='small'>{{t 'Already have an account?'}}
    <a class='post-access-alt' href='/signin/'>{{t 'Sign in'}}</a></div>
</div>

This way you could customize your message, make it more relevant for your audience and even have control over how the CTA looks like.

To implement a fading effect for the public content you can modify the post.hbs layout like this:

<div class="content">
  {{#if access}}
	  {{content}}
  {{else}}
	  <div class="post-sneak-peek fading">
		  {{{html}}}
	  </div>
    {{> content-cta}}
  {{/if}}
</div>

The {{access}} helper can be used to restrict access to some components, like in the above case for a members-only post for a logged-in user the {{access}} helper returns true and the content will be shown, while for regular users the {{html}} and the {{> content-cta}} will be shown.

The fading will be handled with css and here is the code from the .fading class:

.post-sneak-peek {
  position: relative;
}

.post-sneak-peek.fading:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 80%;
  background: linear-gradient(transparent, var(--color-bg-body) 85%);
}

Example in the Dashi theme ⟶

More in Tips & Tricks

All tips

Ghost CMS Price Helper Overview & Tips

How to use the price helper in your Ghost theme. Overview of the available options and specific use cases with examples on what you can do with the helper.

Ghost Pro Hosting

Get the best managed Ghost CMS hosting and focus on bringing value to your audience.