From f456494776df062397414267d6c8b7c14645aa77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=C3=ABl=20van=20der=20Winden?= Date: Tue, 18 Jun 2024 11:26:20 +0200 Subject: [PATCH] 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. --- .../email-service/__snapshots__/cards.test.js.snap | 10 +++++----- ghost/email-service/lib/EmailRenderer.js | 4 ++++ .../lib/email-templates/partials/styles-old.hbs | 12 ++++++++++++ 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap b/ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap index 849e15afd9..2c5c818a65 100644 --- a/ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap +++ b/ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap @@ -1634,14 +1634,14 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing -

This is just a simple paragraph, no frills.

This is block quote
This is a...different block quote

This is a heading!

Here's a smaller heading.

\\"Cows
A lovely cow

A heading

+

This is just a simple paragraph, no frills.

This is block quote
This is a...different block quote

This is a heading!

Here's a smaller heading.

\\"Cows
A lovely cow

A heading

and a paragraph (in markdown!)

A paragraph inside an HTML card.

And another one, with some bold text.

-

A gallery.

+

A gallery.

@@ -1657,7 +1657,7 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing
-

My favorite website.

+

My favorite website.

-

A lovely video of a woman on the beach doing nothing.

+

A lovely video of a woman on the beach doing nothing.

@@ -1841,7 +1841,7 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing -

Some text.

A blockquote

Some more text.

console.log('Hello world!');

A tiny little script.

+

Some text.

A blockquote

Some more text.

console.log('Hello world!');

A tiny little script.

diff --git a/ghost/email-service/lib/EmailRenderer.js b/ghost/email-service/lib/EmailRenderer.js index ea096b1cd7..143aa6a91d 100644 --- a/ghost/email-service/lib/EmailRenderer.js +++ b/ghost/email-service/lib/EmailRenderer.js @@ -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}); diff --git a/ghost/email-service/lib/email-templates/partials/styles-old.hbs b/ghost/email-service/lib/email-templates/partials/styles-old.hbs index 9c5a4e24c0..d3cd20b295 100644 --- a/ghost/email-service/lib/email-templates/partials/styles-old.hbs +++ b/ghost/email-service/lib/email-templates/partials/styles-old.hbs @@ -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; + } + } /* -------------------------------------