Center aligned feature image in email template (#20491)

REF DES-380
- Center aligned feature image in email template
- Updated feature image css in editor to better display image overlay
and improve caption spacing

ghost/admin/app/components/gh-editor-feature-image.hbs

@@ -50,7 +50,7 @@
                     {{svg-jar "koenig/kg-trash"}}
                 </button>
             </div>
-            <div class="relative flex justify-between align-center">
+            <div class="gh-editor-feature-image-caption-container">
                 {{#if this.isEditingAlt}}
                     <input
                         type="text"

ghost/admin/app/styles/layouts/editor.css

@@ -160,8 +160,8 @@
 .gh-og-preview {
     background: #fff;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
-    0 -1px 0 0 rgba(0, 0, 0, 0.06) inset,
+        0 -1px 0 0 rgba(0, 0, 0, 0.06) inset,
-    0 1px 4px rgba(0, 0, 0, 0.1);
+            0 1px 4px rgba(0, 0, 0, 0.1);
 }
 
 .gh-og-preview-image {
@@ -229,7 +229,7 @@
     border-style: solid;
     border-color: #e1e8ed;
     color: #292f33;
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 1.4rem;
     line-height: 1.3em;
     background: #fff;
@@ -283,7 +283,7 @@
 /* NEW editor
 /* ---------------------------------------------------------- */
 
-.gh-main > section.gh-editor-fullscreen {
+.gh-main>section.gh-editor-fullscreen {
     position: fixed;
     top: 0;
     left: 0;
@@ -449,7 +449,7 @@
 .gh-editor-feedback-dropdown {
     min-width: 400px;
     border-radius: 3px;
-    box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 20px -3px rgba(0,0,0,.2);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 8px 20px -3px rgba(0, 0, 0, .2);
     padding: 20px;
     background-color: #fff;
     background-clip: padding-box;
@@ -553,13 +553,20 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
     height: 4px;
 }
 
+.gh-editor-feature-image {
+    position: relative;
+}
+
+.gh-editor-feature-image img {
+    display: block;
+}
 .gh-editor-feature-image-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
-    bottom: 100px;
+    bottom: 0;
-    background-image: linear-gradient(180deg,rgba(0,0,0,.2),transparent 40%,transparent);
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 40%, transparent);
     transition: all .1s ease-in;
     opacity: 0;
 }
@@ -677,12 +684,19 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
     stroke: var(--midgrey-l2);
 }
 
+.gh-editor-feature-image-caption-container {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: .8rem 0;
+}
 .gh-editor-feature-image-alttext,
 .gh-editor-feature-image-caption {
     width: 100%;
     min-height: 24px;
-    margin: 0 0 1.2rem 0;
+    margin: 0;
-    padding: 0;
+    padding: 0 3.6rem 0 0;
     outline: none;
     border-width: 0;
     border-style: none;
@@ -1058,7 +1072,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
     width: 100%;
     height: 100%;
     border: 2px solid var(--blue);
-    background-color: rgba(255,255,255,0.6);
+    background-color: rgba(255, 255, 255, 0.6);
 }
 
 .gh-editor-drop-target .drop-target-message {
@@ -1109,6 +1123,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
     position: relative;
     vertical-align: bottom;
 }
+
 .editor-toolbar .fa-check:before {
     position: absolute;
     right: 3px;
@@ -1197,8 +1212,8 @@ figure {
     left: -20px;
     width: 20px;
     height: 100%;
-    background: rgb(255,255,255);
+    background: rgb(255, 255, 255);
-    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
     z-index: 999;
     opacity: 0;
     transition: all 250ms ease-out;
@@ -1211,22 +1226,22 @@ figure {
     right: 0;
     width: 20px;
     height: 100%;
-    background: rgb(255,255,255);
+    background: rgb(255, 255, 255);
-    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
     z-index: 999;
 }
 
 .ember-power-select-option[aria-current="true"] .kg-settings-link-url.scroller::before {
     opacity: 1;
     left: 0;
-    background: linear-gradient(90deg, rgba(244,245,245,1) 0%, rgba(244,245,245,0) 100%);
+    background: linear-gradient(90deg, rgba(244, 245, 245, 1) 0%, rgba(244, 245, 245, 0) 100%);
 }
 
 .ember-power-select-option[aria-current="true"] .kg-settings-link-url::after {
-    background: linear-gradient(90deg, rgba(244,245,245,0) 0%, rgba(244,245,245,1) 100%);
+    background: linear-gradient(90deg, rgba(244, 245, 245, 0) 0%, rgba(244, 245, 245, 1) 100%);
 }
 
-.kg-settings-link-url > span {
+.kg-settings-link-url>span {
     display: inline-block;
     font-weight: 400;
     font-size: 1.2rem;
@@ -1251,4 +1266,4 @@ figure {
     color: var(--red);
     font-weight: 300;
     letter-spacing: 0.3px;
-}
+}

ghost/core/test/e2e-api/admin/__snapshots__/email-previews.test.js.snap

@@ -1148,7 +1148,7 @@ table.body h2 span {
 
                                             <tr class=\\"feature-image-row\\">
                                                 <td class=\\"feature-image
-                                                \\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #000000; padding-bottom: 30px; width: 100%;\\" width=\\"100%\\" valign=\\"top\\"><img src=\\"https://example.com/super_photo.jpg\\" style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%;\\"></td>
+                                                \\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #000000; padding-bottom: 30px; width: 100%; text-align: center;\\" width=\\"100%\\" valign=\\"top\\"><img src=\\"https://example.com/super_photo.jpg\\" style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%;\\"></td>
                                             </tr>
                                         <tr class=\\"post-content-row\\">
                                             <td class=\\"post-content-sans-serif\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; font-size: 17px; line-height: 1.5em; color: #000000; padding-bottom: 20px; border-bottom: 1px solid #e5eff5; border-bottom: 1px solid rgba(0, 0, 0, 0.12); max-width: 600px;\\" valign=\\"top\\">
@@ -1360,7 +1360,7 @@ exports[`Email Preview API Read can read post email preview with fields 4: [head
 Object {
   "access-control-allow-origin": "http://127.0.0.1:2369",
   "cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
-  "content-length": "28343",
+  "content-length": "28380",
   "content-type": "application/json; charset=utf-8",
   "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
   "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,

ghost/core/test/integration/services/email-service/__snapshots__/batch-sending.test.js.snap

@@ -422,7 +422,7 @@ table.body h2 span {
                                             <tr class=\\"feature-image-row\\">
                                                 <td class=\\"feature-image
                                                         feature-image-with-caption
-                                                \\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #000000; width: 100%; padding-bottom: 10px;\\" width=\\"100%\\" valign=\\"top\\"><img src=\\"https://example.com/image.jpg\\" alt=\\"Testing sending\\" style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%;\\"></td>
+                                                \\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #000000; width: 100%; text-align: center; padding-bottom: 10px;\\" width=\\"100%\\" valign=\\"top\\"><img src=\\"https://example.com/image.jpg\\" alt=\\"Testing sending\\" style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%;\\"></td>
                                             </tr>
                                                 <tr>
                                                     <td class=\\"feature-image-caption\\" align=\\"center\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; width: 100%; padding: 10px 0 30px 0; text-align: center; color: rgba(0, 0, 0, 0.5); font-size: 13px;\\" width=\\"100%\\" valign=\\"top\\">Testing <b>feature image caption</b></td>

ghost/email-service/lib/email-templates/partials/styles-old.hbs

@@ -463,6 +463,7 @@ figure blockquote p {
 .feature-image {
     padding-bottom: 30px;
     width: 100%;
+    text-align: center;
 }
 
 .feature-image-row:first-child > td,

ghost/email-service/lib/email-templates/partials/styles.hbs

@@ -454,6 +454,7 @@ figure blockquote p {
 .feature-image {
     padding-bottom: 30px;
     width: 100%;
+    text-align: center;
 }
 
 .feature-image-with-caption {

ghost/email-service/lib/email-templates/template-old.hbs

@@ -115,7 +115,7 @@
                                                     {{#if post.feature_image_caption }}
                                                         feature-image-with-caption
                                                     {{/if}}
-                                                "><img
+                                                " align="center"><img
                                                     src="{{post.feature_image}}"
                                                     {{#if post.feature_image_width }}
                                                         width="{{post.feature_image_width}}"

ghost/email-service/lib/email-templates/template.hbs

@@ -106,7 +106,7 @@
                                                     {{#if post.feature_image_caption }}
                                                         feature-image-with-caption
                                                     {{/if}}
-                                                "><img
+                                                " align="center"><img
                                                     src="{{post.feature_image}}"
                                                     {{#if post.feature_image_width }}
                                                         width="{{post.feature_image_width}}"