Set post access CTAs

TryGhost · Oct 21, 2019 · 9bf3cb1 · 9bf3cb1
1 parent a0f0aa2
commit 9bf3cb1
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 24 deletions.
diff --git a/assets/built/screen.css b/assets/built/screen.css
diff --git a/assets/built/screen.css.map b/assets/built/screen.css.map
diff --git a/assets/css/screen.css b/assets/css/screen.css
@@ -926,7 +926,7 @@ make sure this only happens on large viewports / desktop-ish devices.
 .post-full-content {
     position: relative;
     margin: 0 auto;
-    padding: 0 170px 6vw;
+    padding: 0 170px 5vw;
     min-height: 230px;
     font-family: Georgia, serif;
     font-size: 2.0rem;
@@ -3150,6 +3150,52 @@ form[data-members-form].error .message-error {
     display: none;
 }
 
+.post-upgrade-cta {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.post-upgrade-cta-content {
+    max-width: 840px;
+    width: 90vw;
+    margin: 0 5vw;
+    padding: 40px 30px;
+    text-align: center;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    color: #fff;
+    background: color(var(--blue) l(-5%));
+    border-radius: 5px;
+}
+
+.post-upgrade-cta-content h2 {
+    margin: 0;
+    color: #fff;
+    font-weight: 600;
+    font-size: 2.6rem;
+    letter-spacing: -0.5px;
+}
+
+.post-upgrade-cta .button,
+.post-upgrade-cta .button:hover {
+    margin: 30px 0;
+    color: var(--blue);
+    background: #fff;
+    box-shadow: none;
+    text-decoration: none;
+}
+
+.post-upgrade-cta p {
+    margin: 0;
+}
+
+.post-upgrade-cta a,
+.post-upgrade-cta a:hover {
+    color: #fff;
+    text-decoration: underline;
+    box-shadow: none;
+}
+
 
 /* 13. Dark Mode
 /* ---------------------------------------------------------- */

diff --git a/post.hbs b/post.hbs
@@ -85,40 +85,52 @@ into the {body} of the default.hbs template --}}
                 </div>
             </header>
 
-
-            {{#if feature_image}}
-            <figure class="post-full-image">
-                {{!-- This is a responsive image, it loads different sizes depending on device
-                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
-                <img
-                    srcset="{{img_url feature_image size="s"}} 300w,
-                            {{img_url feature_image size="m"}} 600w,
-                            {{img_url feature_image size="l"}} 1000w,
-                            {{img_url feature_image size="xl"}} 2000w"
-                    sizes="(max-width: 800px) 400px,
-                        (max-width: 1170px) 1170px,
-                            2000px"
-                    src="{{img_url feature_image size="xl"}}"
-                    alt="{{title}}"
-                />
-            </figure>
-            {{/if}}
-
-            {{!-- if the user has access to this post, show it to them --}}
             {{#if access}}
+            {{!-- if the user has access to this post, show it to them --}}
 
+                {{#if feature_image}}
+                <figure class="post-full-image">
+                    {{!-- This is a responsive image, it loads different sizes depending on device
+                    https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+                    <img
+                        srcset="{{img_url feature_image size="s"}} 300w,
+                                {{img_url feature_image size="m"}} 600w,
+                                {{img_url feature_image size="l"}} 1000w,
+                                {{img_url feature_image size="xl"}} 2000w"
+                        sizes="(max-width: 800px) 400px,
+                            (max-width: 1170px) 1170px,
+                                2000px"
+                        src="{{img_url feature_image size="xl"}}"
+                        alt="{{title}}"
+                    />
+                </figure>
+                {{/if}}
                 <section class="post-full-content">
                     <div class="post-content">
                         {{content}}
                     </div>
                 </section>
 
             {{else}}
+            {{!-- if the user does not have access, show them an upgrade CTA --}}
+
                 <section class="post-full-content">
                     <div class="post-content">
-                        <p>This is a members only post</p>
+                        <p>You don't have access to this post on <strong>{{@site.title}}</strong> at the moment, but if you upgrade your account you'll be able to see the whole thing, as well as all the other posts in the archive! Subscribing only takes a few seconds and will give you immediate access.</p>
                     </div>
+                    <aside class="post-upgrade-cta">
+                        <div class="post-upgrade-cta-content">
+                            {{#if @member}}
+                            <h2>This post is for paying subscribers only</h2>
+                            {{else}}
+                            <h2>This post is for subscribers only</h2>
+                            {{/if}}
+                            <a class="button large primary" href="/signup/">Subscribe now</a>
+                            <p><small>Already have an account? <a href="/signin/">Sign in</a></small></p>
+                        </div>
+                    </aside>
                 </section>
+
             {{/if}}
 
             {{!--