mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-23 22:11:09 +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:
Sanne de Vries
GitHub
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"
|
||||
|
||||
@ -553,12 +553,19 @@ 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);
|
||||
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;
|
||||
@ -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;
|
||||
|
||||
@ -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