mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-09-11 12:55:37 +03:00
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
This commit is contained in:
parent
5f36bef451
commit
95a4895e8f
@ -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"
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -1148,7 +1148,7 @@ table.body h2 span {
|
||||
|
||||
<tr class=\\"feature-image-row\\">
|
||||
<td class=\\"feature-image
|
||||
\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 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, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 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, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 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 \\]\\|\\\\\\\\\\.\\)\\*"/,
|
||||
|
@ -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, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 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, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 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, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 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>
|
||||
|
@ -463,6 +463,7 @@ figure blockquote p {
|
||||
.feature-image {
|
||||
padding-bottom: 30px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-image-row:first-child > td,
|
||||
|
@ -454,6 +454,7 @@ figure blockquote p {
|
||||
.feature-image {
|
||||
padding-bottom: 30px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-image-with-caption {
|
||||
|
@ -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}}"
|
||||
|
@ -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}}"
|
||||
|
Loading…
Reference in New Issue
Block a user