OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Center aligned feature image in email template (#20491)

Browse Source 
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
This commit is contained in:
Sanne de Vries 2024-07-01 10:43:26 +02:00 committed by GitHub
parent 5f36bef451
commit 95a4895e8f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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"

51
ghost/admin/app/styles/layouts/editor.css
View File

@ -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 4px rgba(0, 0, 0, 0.1);
0 -1px 0 0 rgba(0, 0, 0, 0.06) inset,
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;
background-image: linear-gradient(180deg,rgba(0,0,0,.2),transparent 40%,transparent);
bottom: 0;
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;
padding: 0;
margin: 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: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: rgb(255, 255, 255);
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: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: rgb(255, 255, 255);
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;
}
}

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

@ -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 \\]\\|\\\\\\\\\\.\\)\\*"/,

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

@ -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>

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

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

1
ghost/email-service/lib/email-templates/partials/styles.hbs
View File

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

2
ghost/email-service/lib/email-templates/template-old.hbs
View File

@ -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}}"

2
ghost/email-service/lib/email-templates/template.hbs
View File

@ -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}}"