From 4961b356928dc0eff7466d386d223ddb1da34a71 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Fri, 18 Jun 2021 18:50:20 +0200
Subject: [PATCH] Added feature image caption to newsletter template preview

---
 .../components/modal-email-design-settings-labs.hbs   |  1 +
 ghost/admin/app/styles/layouts/members.css            | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/ghost/admin/app/components/modal-email-design-settings-labs.hbs b/ghost/admin/app/components/modal-email-design-settings-labs.hbs
index 0f73169500..13be79f96c 100644
--- a/ghost/admin/app/components/modal-email-design-settings-labs.hbs
+++ b/ghost/admin/app/components/modal-email-design-settings-labs.hbs
@@ -225,6 +225,7 @@
                         </div>
                         {{#if this.showFeatureImage}}
                             <div class="gh-members-emailpreview-featureimage" style={{this.featureImageStyle}}></div>
+                            <div class="gh-members-emailpreview-featureimage-caption">Feature image caption</div>
                         {{/if}}
                         <div class="gh-members-emailpreview-content {{if (eq this.bodyFontCategory "sans_serif") "sans-serif"}}">
                             <p>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index c4f2f57f85..9deb401328 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -1514,11 +1514,20 @@ p.gh-members-import-errordetail:first-of-type {
     width: 100%;
     max-width: 600px;
     height: 300px;
-    margin-bottom: 1.7em;
+    margin-bottom: 8px;
     background: #fafafa no-repeat 50%;
     background-size: cover;
 }
 
+.labs-newsletter-settings .gh-members-emailpreview-featureimage-caption {
+    width: 100%;
+    max-width: 600px;
+    padding-bottom: 30px;
+    text-align: center;
+    color: var(--midgrey);
+    font-size: 1.3rem;
+}
+
 .gh-members-emailpreview-content {
     padding-bottom: 20px;
     border-bottom: 1px solid #e5eff5;