From 3a4417ebd6bcd4ed7b827dc2493a8f4273b9580b Mon Sep 17 00:00:00 2001
From: Chris Raible <chris@ghost.org>
Date: Mon, 6 Nov 2023 16:40:08 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20email=20rendering=20bug?=
 =?UTF-8?q?=20in=20Gmail=20for=20Android=20(#18886)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refs https://github.com/TryGhost/Ghost/pull/18587/files and
https://github.com/TryGhost/Ghost/pull/17475/files

- In October 2022, `juice`, a library Ghost uses to inline CSS for email
rendering, introduced a small change that began inlining `width: auto`
and `height: auto` from CSS on image tags, resulting in `width="auto"`
and `height="auto"` attributes being added to image tags in rendered emails
(https://github.com/Automattic/juice/commit/cb62062794e07cf4c0f30b16bd2c6b31b8144c41)
- This change in `juice` broke our email rendering in Outlook, which
doesn't play well with `width="auto"` attributes. The first two attempts
to workaround this new behavior in `juice` ended up fixing the issue in
Outlook, but breaking the rendering in other clients
- This commit stores the `height` and `width` attributes of all images
_before_ inlining the CSS with `juice`, and resets them to their
original values, only if they were set to `auto`
---
 ghost/email-service/lib/EmailRenderer.js      | 30 +++++++++++++++++--
 .../email-templates/partials/styles-old.hbs   |  1 +
 .../lib/email-templates/partials/styles.hbs   |  4 +--
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/ghost/email-service/lib/EmailRenderer.js b/ghost/email-service/lib/EmailRenderer.js
index 54f793cf83..04f5ad7507 100644
--- a/ghost/email-service/lib/EmailRenderer.js
+++ b/ghost/email-service/lib/EmailRenderer.js
@@ -368,15 +368,41 @@ class EmailRenderer {
             }, {base});
         }
 
+        // Record the original image width and height attributes before inlining the styles with juice
+        // If any images have `width: auto` or `height: auto` set via CSS, 
+        // juice will explicitly set the width/height attributes to `auto` on the <img /> tag
+        // This is not supported by Outlook, so we need to reset the width/height attributes to the original values
+        // Other clients will ignore the width/height attributes and use the inlined CSS instead
+        $ = cheerio.load(html);
+        const originalImageSizes = $('img').get().map((image) => {
+            const src = image.attribs.src;
+            const width = image.attribs.width;
+            const height = image.attribs.height;
+            return {src, width, height};
+        });
+
         // Juice HTML (inline CSS)
         const juice = require('juice');
-        juice.heightElements = ['TABLE', 'TD', 'TH', 'IMG'];
-        juice.widthElements = ['TABLE', 'TD', 'TH', 'IMG'];
         html = juice(html, {inlinePseudoElements: true, removeStyleTags: true});
 
         // happens after inlining of CSS so we can change element types without worrying about styling
         $ = cheerio.load(html);
 
+        // Reset any `height="auto"` or `width="auto"` attributes to their original values before inlining CSS
+        const imageTags = $('img').get();
+        for (let i = 0; i < imageTags.length; i += 1) {
+            // There shouldn't be any issues with consistency between these two lists, but just in case...
+            if (imageTags[i].attribs.src === originalImageSizes[i].src) {
+                // if the image width or height is set to 'auto', reset to its original value
+                if (imageTags[i].attribs.width === 'auto' && originalImageSizes[i].width) {
+                    imageTags[i].attribs.width = originalImageSizes[i].width;
+                }
+                if (imageTags[i].attribs.height === 'auto' && originalImageSizes[i].height) {
+                    imageTags[i].attribs.height = originalImageSizes[i].height;
+                }
+            }
+        }
+
         // force all links to open in new tab
         $('a').attr('target', '_blank');
 
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 fa0fdcdf40..dd4f6d7f25 100644
--- a/ghost/email-service/lib/email-templates/partials/styles-old.hbs
+++ b/ghost/email-service/lib/email-templates/partials/styles-old.hbs
@@ -638,6 +638,7 @@ a[data-flickr-embed] img {
     display: block;
     margin: 0 auto;
     height: auto;
+    width: auto;
 }
 
 .kg-bookmark-container {
diff --git a/ghost/email-service/lib/email-templates/partials/styles.hbs b/ghost/email-service/lib/email-templates/partials/styles.hbs
index 010493db05..28d0580683 100644
--- a/ghost/email-service/lib/email-templates/partials/styles.hbs
+++ b/ghost/email-service/lib/email-templates/partials/styles.hbs
@@ -685,8 +685,8 @@ a[data-flickr-embed] img {
 .kg-image-card img {
     display: block;
     margin: 0 auto;
-    /* width: auto;
-    height: auto !important; */
+    width: auto;
+    height: auto !important;
 }
 
 .kg-bookmark-container {