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:
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%);
}