mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-23 22:11:09 +03:00
Newsletter captions fix (#20396)
Fixes https://linear.app/tryghost/issue/DES-4/image-caption-size-in-email-newsletter. There were no styles defined for captions for cards beyond the featured image (bookmark, gallery, video), and we had no way of targeting those captions with CSS. They are now wrapped in a div with a specific class, which allows for more selective styling, and are styled similarly to the caption of the featured image.
This commit is contained in:
Daniël van der Winden
GitHub
parent
4ff51f4187
commit
f456494776
@ -1634,14 +1634,14 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing
|
||||
<tr class=\\"post-content-row\\">
|
||||
<td class=\\"post-content\\" style=\\"vertical-align: top; font-family: Georgia, serif; font-size: 18px; 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\\">
|
||||
<!-- POST CONTENT START -->
|
||||
<p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">This is just a simple paragraph, no frills.</p><blockquote style=\\"margin: 2em 0 2em 0; padding: 0 25px 0 25px; border-left: #FF1A75 2px solid; color: #000000; font-size: 17px; font-weight: 500; line-height: 1.6em; letter-spacing: -0.2px;\\">This is block quote</blockquote><blockquote class=\\"kg-blockquote-alt\\" style=\\"margin: 2em 0 2em 0; font-weight: 500; line-height: 1.6em; letter-spacing: -0.2px; border-left: 0 none; padding: 0 50px 0 50px; text-align: center; font-size: 1.2em; font-style: italic; color: #000000; color: rgba(0, 0, 0, 0.5);\\">This is a...different block quote</blockquote><h2 id=\\"this-is-a-heading\\" style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 1.11em; font-weight: 700; text-rendering: optimizeLegibility; color: #000000; margin: 1.5em 0 0.5em 0; font-size: 32px;\\">This is a heading!</h2><h3 id=\\"heres-a-smaller-heading\\" style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 1.11em; font-weight: 700; text-rendering: optimizeLegibility; color: #000000; margin: 1.5em 0 0.5em 0; font-size: 26px;\\">Here's a smaller heading.</h3><div class=\\"kg-card kg-image-card kg-card-hascaption\\" style=\\"margin: 0 0 1.5em; padding: 0;\\"><img src=\\"https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cow_%28Fleckvieh_breed%29_Oeschinensee_Slaunger_2009-07-07.jpg/1920px-Cow_%28Fleckvieh_breed%29_Oeschinensee_Slaunger_2009-07-07.jpg\\" class=\\"kg-image\\" alt=\\"Cows eat grass.\\" loading=\\"lazy\\" style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%; display: block; margin: 0 auto; width: auto; height: auto;\\" width=\\"auto\\" height=\\"auto\\"><div style=\\"text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 13px; padding-top: 5px; line-height: 1.5em;\\"><span style=\\"white-space: pre-wrap;\\">A lovely cow</span></div></div><h1 id=\\"a-heading\\" style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 1.11em; text-rendering: optimizeLegibility; color: #000000; margin: 1.5em 0 0.5em 0; font-size: 42px; font-weight: 700;\\">A heading</h1>
|
||||
<p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">This is just a simple paragraph, no frills.</p><blockquote style=\\"margin: 2em 0 2em 0; padding: 0 25px 0 25px; border-left: #FF1A75 2px solid; color: #000000; font-size: 17px; font-weight: 500; line-height: 1.6em; letter-spacing: -0.2px;\\">This is block quote</blockquote><blockquote class=\\"kg-blockquote-alt\\" style=\\"margin: 2em 0 2em 0; font-weight: 500; line-height: 1.6em; letter-spacing: -0.2px; border-left: 0 none; padding: 0 50px 0 50px; text-align: center; font-size: 1.2em; font-style: italic; color: #000000; color: rgba(0, 0, 0, 0.5);\\">This is a...different block quote</blockquote><h2 id=\\"this-is-a-heading\\" style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 1.11em; font-weight: 700; text-rendering: optimizeLegibility; color: #000000; margin: 1.5em 0 0.5em 0; font-size: 32px;\\">This is a heading!</h2><h3 id=\\"heres-a-smaller-heading\\" style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 1.11em; font-weight: 700; text-rendering: optimizeLegibility; color: #000000; margin: 1.5em 0 0.5em 0; font-size: 26px;\\">Here's a smaller heading.</h3><div class=\\"kg-card kg-image-card kg-card-hascaption\\" style=\\"margin: 0 0 1.5em; padding: 0;\\"><img src=\\"https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cow_%28Fleckvieh_breed%29_Oeschinensee_Slaunger_2009-07-07.jpg/1920px-Cow_%28Fleckvieh_breed%29_Oeschinensee_Slaunger_2009-07-07.jpg\\" class=\\"kg-image\\" alt=\\"Cows eat grass.\\" loading=\\"lazy\\" style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%; display: block; margin: 0 auto; width: auto; height: auto;\\" width=\\"auto\\" height=\\"auto\\"><div class=\\"kg-card-figcaption\\" style=\\"text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 13px; padding-top: 5px; line-height: 1.5em;\\"><span style=\\"white-space: pre-wrap;\\">A lovely cow</span></div></div><h1 id=\\"a-heading\\" style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 1.11em; text-rendering: optimizeLegibility; color: #000000; margin: 1.5em 0 0.5em 0; font-size: 42px; font-weight: 700;\\">A heading</h1>
|
||||
<p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">and a paragraph (in markdown!)</p>
|
||||
|
||||
<!--kg-card-begin: html-->
|
||||
<p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">A paragraph inside an HTML card.</p>
|
||||
<p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">And another one, with some <b>bold</b> text.</p>
|
||||
<!--kg-card-end: html-->
|
||||
<hr style=\\"position: relative; display: block; width: 100%; margin: 3em 0; padding: 0; height: 1px; border: 0; border-top: 1px solid #e5eff5; border-top: 1px solid rgba(0, 0, 0, 0.12);\\"><div class=\\"kg-card kg-gallery-card kg-width-wide kg-card-hascaption\\" style=\\"margin: 0 0 1.5em; padding: 0;\\"><div class=\\"kg-gallery-container\\" style=\\"margin-top: -20px;\\"><div class=\\"kg-gallery-row\\"><div class=\\"kg-gallery-image\\"><img src=\\"https://plus.unsplash.com/premium_photo-1700558685152-81f821a40724?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\\" width=\\"600\\" height=\\"400\\" loading=\\"lazy\\" alt style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%; padding-top: 20px; width: 100%; height: auto;\\"></div></div></div><div style=\\"text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 13px; padding-top: 5px; line-height: 1.5em;\\"><p dir=\\"ltr\\" style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><span style=\\"white-space: pre-wrap;\\">A gallery.</span></p></div></div><div>
|
||||
<hr style=\\"position: relative; display: block; width: 100%; margin: 3em 0; padding: 0; height: 1px; border: 0; border-top: 1px solid #e5eff5; border-top: 1px solid rgba(0, 0, 0, 0.12);\\"><div class=\\"kg-card kg-gallery-card kg-width-wide kg-card-hascaption\\" style=\\"margin: 0 0 1.5em; padding: 0;\\"><div class=\\"kg-gallery-container\\" style=\\"margin-top: -20px;\\"><div class=\\"kg-gallery-row\\"><div class=\\"kg-gallery-image\\"><img src=\\"https://plus.unsplash.com/premium_photo-1700558685152-81f821a40724?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\\" width=\\"600\\" height=\\"400\\" loading=\\"lazy\\" alt style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%; padding-top: 20px; width: 100%; height: auto;\\"></div></div></div><div class=\\"kg-card-figcaption\\" style=\\"text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 13px; padding-top: 5px; line-height: 1.5em;\\"><p dir=\\"ltr\\" style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><span style=\\"white-space: pre-wrap;\\">A gallery.</span></p></div></div><div>
|
||||
<!--[if !mso !vml]-->
|
||||
<div class=\\"kg-card kg-bookmark-card kg-card-hascaption\\" style=\\"margin: 0 0 1.5em; padding: 0; width: 100%; background: #ffffff;\\">
|
||||
<a class=\\"kg-bookmark-container\\" href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" style=\\"display: flex; min-height: 148px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; border-radius: 3px; border: 1px solid #e5eff5; border: 1px solid rgba(0, 0, 0, 0.12); overflow-wrap: anywhere; color: #FF1A75; text-decoration: none;\\" target=\\"_blank\\">
|
||||
@ -1657,7 +1657,7 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing
|
||||
<div class=\\"kg-bookmark-thumbnail\\" style=\\"min-width: 140px; max-width: 180px; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 0 2px 2px 0; background-image: url('https://ghost.org/images/meta/ghost.png');\\">
|
||||
<img src=\\"https://ghost.org/images/meta/ghost.png\\" alt style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%; display: none;\\"></div>
|
||||
</a>
|
||||
<div style=\\"text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 13px; padding-top: 5px; line-height: 1.5em;\\"><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><span style=\\"white-space: pre-wrap;\\">My favorite website.</span></p></div>
|
||||
<div class=\\"kg-card-figcaption\\" style=\\"text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 13px; padding-top: 5px; line-height: 1.5em;\\"><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><span style=\\"white-space: pre-wrap;\\">My favorite website.</span></p></div>
|
||||
</div>
|
||||
<!--[endif]-->
|
||||
<!--[if vml]>
|
||||
@ -1777,7 +1777,7 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing
|
||||
</v:group>
|
||||
<![endif]-->
|
||||
|
||||
<div style=\\"text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 13px; padding-top: 5px; line-height: 1.5em;\\"><p dir=\\"ltr\\" style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><span style=\\"white-space: pre-wrap;\\">A lovely video of a woman on the beach doing nothing.</span></p></div>
|
||||
<div class=\\"kg-card-figcaption\\" style=\\"text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 13px; padding-top: 5px; line-height: 1.5em;\\"><p dir=\\"ltr\\" style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><span style=\\"white-space: pre-wrap;\\">A lovely video of a woman on the beach doing nothing.</span></p></div>
|
||||
</div><table cellspacing=\\"0\\" cellpadding=\\"0\\" border=\\"0\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; padding: 20px; border: 1px solid #E9E9E9; border-radius: 5px; margin: 0 0 1.5em; width: 100%;\\" width=\\"100%\\">
|
||||
|
||||
<tbody><tr>
|
||||
@ -1841,7 +1841,7 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing
|
||||
<v:oval fill=\\"t\\" strokecolor=\\"white\\" strokeweight=\\"4px\\" style=\\"position:absolute;left:261;top:186;width:78;height:78\\"><v:fill color=\\"black\\" opacity=\\"30%\\" /></v:oval>
|
||||
<v:shape coordsize=\\"24,32\\" path=\\"m,l,32,24,16,xe\\" fillcolor=\\"white\\" stroked=\\"f\\" style=\\"position:absolute;left:289;top:208;width:30;height:34;\\" />
|
||||
</v:group>
|
||||
<![endif]--></div><div></div><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">Some text.</p><blockquote style=\\"margin: 2em 0 2em 0; padding: 0 25px 0 25px; border-left: #FF1A75 2px solid; color: #000000; font-size: 17px; font-weight: 500; line-height: 1.6em; letter-spacing: -0.2px;\\">A blockquote</blockquote><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">Some more text.</p><div class=\\"kg-card kg-code-card\\" style=\\"margin: 0 0 1.5em; padding: 0;\\"><pre style=\\"white-space: pre-wrap; overflow: auto; background: #15212A; padding: 15px; border-radius: 3px; line-height: 1.2em; color: #ffffff;\\"><code class=\\"language-javascript\\" style=\\"font-size: 0.9em;\\">console.log('Hello world!');</code></pre><div style=\\"text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 13px; padding-top: 5px; line-height: 1.5em;\\"><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><span style=\\"white-space: pre-wrap;\\">A tiny little script.</span></p></div></div><table cellspacing=\\"0\\" cellpadding=\\"4\\" border=\\"0\\" class=\\"kg-file-card\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; margin: 0 0 1.5em 0; border-radius: 3px; border: 1px solid #e5eff5; border: 1px solid rgba(0, 0, 0, 0.12);\\">
|
||||
<![endif]--></div><div></div><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">Some text.</p><blockquote style=\\"margin: 2em 0 2em 0; padding: 0 25px 0 25px; border-left: #FF1A75 2px solid; color: #000000; font-size: 17px; font-weight: 500; line-height: 1.6em; letter-spacing: -0.2px;\\">A blockquote</blockquote><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">Some more text.</p><div class=\\"kg-card kg-code-card\\" style=\\"margin: 0 0 1.5em; padding: 0;\\"><pre style=\\"white-space: pre-wrap; overflow: auto; background: #15212A; padding: 15px; border-radius: 3px; line-height: 1.2em; color: #ffffff;\\"><code class=\\"language-javascript\\" style=\\"font-size: 0.9em;\\">console.log('Hello world!');</code></pre><div class=\\"kg-card-figcaption\\" style=\\"text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 13px; padding-top: 5px; line-height: 1.5em;\\"><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><span style=\\"white-space: pre-wrap;\\">A tiny little script.</span></p></div></div><table cellspacing=\\"0\\" cellpadding=\\"4\\" border=\\"0\\" class=\\"kg-file-card\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; margin: 0 0 1.5em 0; border-radius: 3px; border: 1px solid #e5eff5; border: 1px solid rgba(0, 0, 0, 0.12);\\">
|
||||
<tbody><tr>
|
||||
<td 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;\\" valign=\\"top\\">
|
||||
<table cellspacing=\\"0\\" cellpadding=\\"0\\" border=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\">
|
||||
|
||||
@ -419,6 +419,10 @@ class EmailRenderer {
|
||||
return {src, width, height};
|
||||
});
|
||||
|
||||
// Add a class to each figcaption so we can style them in the email
|
||||
$('figcaption').each((i, elem) => !!($(elem).addClass('kg-card-figcaption')));
|
||||
html = $.html();
|
||||
|
||||
// Juice HTML (inline CSS)
|
||||
const juice = require('juice');
|
||||
html = juice(html, {inlinePseudoElements: true, removeStyleTags: true});
|
||||
|
||||
@ -472,6 +472,10 @@ figure blockquote p {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.kg-card-figcaption {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* -------------------------------------
|
||||
FEEDBACK BUTTONS
|
||||
------------------------------------- */
|
||||
@ -1593,6 +1597,14 @@ a[data-flickr-embed] img {
|
||||
font-size: 13px!important;
|
||||
}
|
||||
|
||||
.kg-card-figcaption {
|
||||
font-size: 13px!important;
|
||||
}
|
||||
|
||||
.kg-card-figcaption p, .kg-card-figcaption p span {
|
||||
font-size: 13px!important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* -------------------------------------
|
||||
|
||||
Loading…
Reference in New Issue
Block a user