From b0940f1b5a4a8cb50b2f2e4f8d2dea9f5c020e71 Mon Sep 17 00:00:00 2001 From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com> Date: Wed, 29 May 2024 16:22:42 +0200 Subject: [PATCH] Added subhead to newsletter template (#20276) REF MOM-146 - Added subhead to email template behind a flag and and wired it up to the subhead newsletter setting. --- ghost/email-service/lib/EmailRenderer.js | 2 + .../email-templates/partials/styles-old.hbs | 46 ++++++++++++------- .../lib/email-templates/template-old.hbs | 11 ++++- .../email-service/test/email-renderer.test.js | 1 + 4 files changed, 42 insertions(+), 18 deletions(-) diff --git a/ghost/email-service/lib/EmailRenderer.js b/ghost/email-service/lib/EmailRenderer.js index 373bd90dad..e81c7d88ee 100644 --- a/ghost/email-service/lib/EmailRenderer.js +++ b/ghost/email-service/lib/EmailRenderer.js @@ -1045,6 +1045,7 @@ class EmailRenderer { newsletter: { name: newsletter.get('name'), showPostTitleSection: newsletter.get('show_post_title_section'), + showSubhead: newsletter.get('show_subhead'), showCommentCta: newsletter.get('show_comment_cta') && this.#settingsCache.get('comments_enabled') !== 'off' && !hasEmailOnlyFlag, showSubscriptionDetails: newsletter.get('show_subscription_details') }, @@ -1078,6 +1079,7 @@ class EmailRenderer { classes: { title: 'post-title' + (newsletter.get('title_font_category') === 'serif' ? ` post-title-serif` : ``) + (newsletter.get('title_alignment') === 'left' ? ` post-title-left` : ``), titleLink: 'post-title-link' + (newsletter.get('title_alignment') === 'left' ? ` post-title-link-left` : ``), + subhead: 'post-subhead' + (newsletter.get('title_alignment') === 'left' ? ` post-subhead-left` : ``), meta: 'post-meta' + (newsletter.get('title_alignment') === 'left' ? ` post-meta-left` : ` post-meta-center`), body: newsletter.get('body_font_category') === 'sans_serif' ? `post-content-sans-serif` : `post-content` }, diff --git a/ghost/email-service/lib/email-templates/partials/styles-old.hbs b/ghost/email-service/lib/email-templates/partials/styles-old.hbs index 53dd113540..14057a5ba4 100644 --- a/ghost/email-service/lib/email-templates/partials/styles-old.hbs +++ b/ghost/email-service/lib/email-templates/partials/styles-old.hbs @@ -272,7 +272,7 @@ figcaption { padding-top: 10px; padding-bottom: 10px; line-height: 1.5em; - color: {{secondaryTextColor}}; + color: #738a94; } figcaption a { @@ -327,11 +327,6 @@ figure blockquote p { padding-top: 32px; } -.site-info-bordered { - padding-top: 32px; - border-bottom: 1px solid #e5eff5; -} - .site-url { color: #15212A; font-size: 16px; @@ -342,7 +337,7 @@ figure blockquote p { } .site-url-bottom-padding { - padding-bottom: 32px; + padding-bottom: 12px; } .site-title { @@ -351,7 +346,7 @@ figure blockquote p { .site-subtitle { color: #738a94; - font-size: 14px; + font-size: 13px; font-weight: 400; text-transform: none; } @@ -381,10 +376,28 @@ figure blockquote p { text-align: left; } +.post-subhead-wrapper { + width: 100%; + max-width: 600px !important; +} + +.post-subhead { + margin: 0; + padding-bottom: 20px; + color: #15212A; + font-size: 17px; + line-height: 1.3em; + text-align: center; +} + +.post-subhead-left { + text-align: left; +} + .post-meta, .view-online { color: #738a94; - font-size: 14px; + font-size: 13px; font-weight: 400; text-align: center; } @@ -442,7 +455,7 @@ figure blockquote p { padding-bottom: 32px; text-align: center; font-size: 13px !important; - color: {{secondaryTextColor}}; + color: #738a94; line-height: 1.5em; } @@ -1111,7 +1124,7 @@ a[data-flickr-embed] img { padding: 20px; margin-bottom: 1.5em; border-radius: 4px; - border: 1px solid {{secondaryBorderColor}}; + border: 1px solid #738a94; } @@ -1287,6 +1300,10 @@ a[data-flickr-embed] img { font-size: 16px; } + table.body .post-subhead { + font-size: 16px !important; + } + table.body pre { white-space: pre-wrap !important; word-break: break-word !important; @@ -1326,15 +1343,10 @@ a[data-flickr-embed] img { padding-top: 0 !important; } - table.body .site-info, - table.body .site-info-bordered { + table.body .site-info { padding-top: 24px !important; } - table.body .site-url-bottom-padding { - padding-bottom: 24px !important; - } - table.body .post-title-link { margin-top: 24px !important; } diff --git a/ghost/email-service/lib/email-templates/template-old.hbs b/ghost/email-service/lib/email-templates/template-old.hbs index 50317ef07f..e46bb047bb 100644 --- a/ghost/email-service/lib/email-templates/template-old.hbs +++ b/ghost/email-service/lib/email-templates/template-old.hbs @@ -45,7 +45,7 @@ {{#if (or showHeaderIcon showHeaderTitle showHeaderName) }} - + {{#if (and showHeaderIcon site.iconUrl) }} @@ -79,6 +79,15 @@ {{post.title}} + {{#hasFeature 'subhead'}} + {{#if newsletter.showSubhead}} + + + + {{/if}} + {{/hasFeature}}
+

Jonathan Haidt wrote a best-selling book about teens and social media. Not everyone buys its thesis.

+
diff --git a/ghost/email-service/test/email-renderer.test.js b/ghost/email-service/test/email-renderer.test.js index 82e7eabd95..ad0f337d40 100644 --- a/ghost/email-service/test/email-renderer.test.js +++ b/ghost/email-service/test/email-renderer.test.js @@ -1995,6 +1995,7 @@ describe('Email renderer', function () { title: 'post-title post-title-serif post-title-left', titleLink: 'post-title-link post-title-link-left', meta: 'post-meta post-meta-left', + subhead: 'post-subhead post-subhead-left', body: 'post-content-sans-serif' }); });