Free access to limited number of articles per month for new non-subscribers

@kevinmiguet Have you seen the public previews feature I mentioned above? That might be another option for your client. This feature was only released quite recently.

1 Like

We also use this on regular paying articles with a little and nice “shadow” css effect and it works very well indeed !

but they wanted to let anyone read one article entirely because they think it’s a better way to “taste” for real what an article looks like

1 Like

That’s all good! Just thought I would point mention it in case you hadn’t seen it, as it is a rather recent addition to the Ghost feature set (and a very useful one) :slightly_smiling_face:

2 Likes

And I think having a link to an entire article is not a bad idea at all. I would certainly prefer that, as a user, to the “2 free articles remaining…” system that is used on Medium, HBR etc. - I personally find that system annoying and it has never once persuaded me to pull out my Mastercard. All it does is persuade me to use a new container/proxy/browser or whatever is required to (easily) circumvent the paywall.

Thanks for the suggestions, folks — much appreciated wisdom from the brilliant Ghost hive mind.

Yep, we already use the public preview feature on every article, but thanks for pointing me to it.

And yep, we already have a ‘Inside the subscribers’ vault’ section with clearly labelled ‘sample’ posts of each main type that have been made public — a really nice idea, so thanks for the suggestion, but we’ve done that already :wink: (cf. homepage section of https://www.agencyradar.io/)

Just thought I’d ask in case anyone had a bright way of doing this kind of thing that I hadn’t managed to work out yet.

And, yep, I think maybe your comment about people just getting round that kind of feature with an anonymous browser or proxy or whatever is a timely nudge to think again.

2 Likes

HBR, Medium, etc. must feel this ‘free articles’ thing is a useful thing for them to do — presumably they’ve got a large research base, analytics, UX data, etc. that says that it’s a worthwhile pay-off between people getting around it with an anonymous browser and paying sign-ups.

Hmm. Stuff to ponder.

1 Like

Another interesting model, that might be worth looking at perhaps, is this one, posted by @kevinmiguet, who is serendipitously already in this thread!

1 Like

Thanks

:eyes:

1 Like

Yes, that occurred to me as well, and I think it’s a valid point. But HBR have a very well-established brand and audience. And their target audience is a particular one as well, I think, who are probably more inclined to and capable of pulling out an Amex card than circumventing a paywall :joy:

And Medium is, well… a pile of :poop:

IMHO :stuck_out_tongue:

1 Like

Hi Kevin. Could you share how you created the shadow effect? I want to use previews but I hate how brutal the cut off is. It makes it look like it’s just the end of the article. Thanks!

@iroughol I’ve implemented this myself in a theme for a colleague’s website that we still haven’t launched. Anyway, as it uses a theme by Aspire Themes as I see your site does, your theme should have the same setup.

In your partials/content-cta.hbs file wrap the {{{html}}} as is done below:

<div class="fadeout">
  {{{html}}}
</div>

Then place the following CSS wherever you like to place your custom CSS:

.fadeout {
 	-webkit-mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
 	mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
}

If I remember correctly, that should be all.

1 Like

@Stromfeldt Oh thank you, so nice, will try it today!
Where DO I like to place my custom CSS actually? I haven’t created any yet. (Or rather I tried and it failed.)

If you haven’t adjusted any of the CSS in your theme itself then you can just place it in code injection via Ghost’s admin. Make sure to wrap it in <style> tags if you’ve got nothing in there already:

<style>
.fadeout {
 	-webkit-mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
 	mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
}
</style>

@Stromfeldt Thanks! I’m doing something wrong but no idea what. My theme is Krabi and I think the corresponding file in partials is post-upgrade-cta.hbs which reads like this. Where would you add the wrap?

<aside class='c-post-upgrade-cta'>
  {{#unless @member.paid}}
    <h4 class='c-post-upgrade-cta__title'>{{t 'This post is for members only. Subscribe now to support independent journalism and get access to more.'}}</h4>
  {{/unless}}

  <a class='c-btn c-btn--action u-mb-16' href='{{ @site.url }}/subscribe/'>{{t 'Become a member'}}</a>
  <p class='u-type-xs'>{{t 'Already have an account?'}} <a href='{{ @site.url }}/signin/' class='u-link'>{{t 'Log in'}}</a></p>
</aside>

No, that’s the wrong file. It should be content-cta.hbs, but if @ahmadajmi has named it something else in Krabi then look for the file with the line that has {{{html}}} in it.

Weird. Done a full search and that file does not exist. Nowhere has {{{html}}}, nor is there a partial that looks like it’s referring to the public preview anywhere. Maybe @ahmadajmi can help. Thanks anyway for taking the time for a noob like me.

The content-cta card is not required for themes to implement. If they don’t, Ghost will use a fallback :slight_smile:

@iroughol I think what you want to do is to add a shadow to the content element. So, instead of editing the post-upgrade-cta.hbs file, you can edit the post.hbs file. So:

  1. In post.hbs, update line 8 to be.
<section class='c-content {{#unless access}} fadeout {{/unless}}'>

This change will only add the fadeout class if the visitor has no post access.

  1. Then, using @Stromfeldt code in Code Injection:
<style>
  .fadeout {
    -webkit-mask-image: linear-gradient(to bottom, var(--color-dark) 1%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--color-dark) 1%, transparent 100%);
  }
</style>

I used --color-dark instead of --color-black, which is a Krabi CSS color variable.

The result will be nice as:)

PS: Krabi uses the post-upgrade-cta.hbs name instead of partials/content-cta.hbs.

3 Likes

Fantastic!

Thank you both @Stromfeldt and @ahmadajmi. I really appreciate this community.

2 Likes

So nice; I will add it in the next theme update.

2 Likes