Modify image & box at member only posts

Themes
1

Hello community.

I’ve worked with other CMS in the past but I’m new to Ghost and am absolutely impressed. It’s just love at first sight. So, first of all, thanks to everyone who supports Ghost and helps others to set it up!

I’m using the trial version at the time but I want to do my first upgrade to starter now. So I think I will not have the ability to fully customize templates until I do my next upgrade to creator. So for this reason I will need to use code injection to customize my template.

2 questions:

  1. I use the standard Casper layout. When I set a post to members only, the thumbnail on the home page is blurred and members only is displayed above it. How can I turn off this functionality? Is there a css code or something I can inject into the header? I want the image to be displayed normally, so nothing about member only is displayed above it.

  2. If I set a post to member only and set a public preview, a box appears in the post at this point, “this post is for subscribers only”. How can I customize the text of this box? I just want to replace the word “post” with “content”. Because the first part of the post is freely available. Only the second part is member only. That’s why I don’t want the preview image to be changed either (point 1). How could I do this?

i hope someone can help me with this.

Thanks in advance!

Jake

1 Like
2

It seems that custom CTA is the answer:

3

Custom CTA is not going to be an option with only code injection. But @Labs , you should be able to turn off the blur and hide the padlock with code injection. And you could change that word with javascript, I’m thinking. Particularly since it’s likely ‘below the fold’, the after the fact change isn’t going to be noticable.

The following styles should go in the Ghost code injection head (to prevent flicker). The first removes the ‘members only’ and the second removes the blur.

<style>
.post-card-access {
  display:none;
}
.post-card[class*=post-access-] .post-card-image-link:after {
    -webkit-backdrop-filter: unset;
    backdrop-filter: unset;
    background-color: unset;
}
</style>

You probably also will want to suppress the lock that shows up in the titles, if you don’t have a featured image. I /think/ this is selective enough, but if you find you’re missing other SVGs, it might need adjustment:

h2.post-card-title > svg {
    display: none;
}

And then to change the CTA text, you’d use this, in the footer:

<script>
let myselection = document.querySelector('.gh-post-upgrade-cta-content h2');
if (myselection) {myselection.innerHTML='Put your new text here';}
</script>

Happy Ghosting! :slight_smile:

2 Likes
4

Hi Cathy,

that’s 100% working!

Thank you so much, that helped me a lot! :smiley:

Jake

1 Like