From 0fb9089f4e9b39701c88da63e8e07be13a061780 Mon Sep 17 00:00:00 2001 From: louispaulb Date: Mon, 1 Jun 2026 18:45:30 -0400 Subject: [PATCH] fix(campaigns/templates): center logos via nested-table pattern MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The native-block imageBlock factory was emitting img tags wrapped only by a td with text-align:center. That doesn't actually center the image because text-align only affects inline content, and the img has display:block. The result: top header logo and dark-footer logo were left-aligned despite the textAlign:"center" prop on the block. Fix: wrap each img in an inner exactly the way MJML/Litmus/Mailchimp do it. This is the canonical email-client pattern that works in Outlook 2007-2019 (which ignores margin:0 auto on inline tables but respects table align attributes). Also: the AI converter dumped the entire dark footer band into a SINGLE htmlBlock with malformed table markup (a stray outside its row). Split into proper image + text native blocks so: 1. The logo inherits the new centered nested-table pattern 2. The URL+copyright text is now individually editable in Unlayer 3. The {{year}} placeholder is in a text block where it belongs And one AI hallucination correction: the converter assigned textAlign:"left" to the top header logo (probably because the surrounding column had align="left" in the MJML output). Original design intent was centered — fixed in the spec. Verified live: both logos (140px top, 120px footer) now render with align="center" on their nested wrapper table. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 --- .../templates/gift-email-fr-native.html | 21 ++++-- .../templates/gift-email-fr-native.json | 65 +++++++++++++++---- .../gift-email-native-reminder-fr.html | 12 +++- .../scripts/build-native-template.js | 11 +++- .../templates-spec/gift-email-fr-native.js | 5 +- .../templates/gift-email-fr-native.html | 21 ++++-- .../templates/gift-email-fr-native.json | 65 +++++++++++++++---- .../gift-email-native-reminder-fr.html | 12 +++- 8 files changed, 175 insertions(+), 37 deletions(-) diff --git a/scripts/campaigns/templates/gift-email-fr-native.html b/scripts/campaigns/templates/gift-email-fr-native.html index 10ce4df..9270a57 100644 --- a/scripts/campaigns/templates/gift-email-fr-native.html +++ b/scripts/campaigns/templates/gift-email-fr-native.html @@ -56,8 +56,12 @@
-
- TARGO +
+ + +
+ TARGO +
@@ -161,8 +165,17 @@
- + +
-
TARGO
www.targo.ca ·  1867 ch. de la rivière, Ste-Clotilde, QC
© {{year}} TARGO Communications · Tous droits réservés.
+ + +
+ TARGO +
+
+ +
+
www.targo.ca ·  1867 ch. de la rivière, Ste-Clotilde, QC
© {{year}} TARGO Communications · Tous droits réservés.
diff --git a/scripts/campaigns/templates/gift-email-fr-native.json b/scripts/campaigns/templates/gift-email-fr-native.json index 01c74a9..be3f72b 100644 --- a/scripts/campaigns/templates/gift-email-fr-native.json +++ b/scripts/campaigns/templates/gift-email-fr-native.json @@ -2,11 +2,11 @@ "counters": { "u_row": 4, "u_column": 4, - "u_content_text": 7, - "u_content_image": 1, + "u_content_text": 8, + "u_content_image": 2, "u_content_button": 1, "u_content_divider": 0, - "u_content_html": 6 + "u_content_html": 5 }, "body": { "id": "u_body", @@ -116,7 +116,7 @@ "autoWidth": false, "maxWidth": "140px" }, - "textAlign": "left", + "textAlign": "center", "altText": "TARGO", "action": { "name": "web", @@ -564,8 +564,8 @@ "id": "u_column_4", "contents": [ { - "id": "u_content_html_6", - "type": "html", + "id": "u_content_image_2", + "type": "image", "values": { "selectable": true, "draggable": true, @@ -574,13 +574,56 @@ "hideable": true, "hideDesktop": false, "displayCondition": null, - "containerPadding": "26px 36px 22px", + "containerPadding": "26px 36px 0", "anchor": "", - "_meta": { - "htmlID": "u_content_html_6", - "htmlClassNames": "u_content_html" + "src": { + "url": "https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content", + "width": 120, + "height": "auto", + "autoWidth": false, + "maxWidth": "120px" }, - "html": "
\"TARGO\"
www.targo.ca ·  1867 ch. de la rivière, Ste-Clotilde, QC
© {{year}} TARGO Communications · Tous droits réservés.
" + "textAlign": "center", + "altText": "TARGO", + "action": { + "name": "web", + "values": { + "href": "", + "target": "_blank" + } + }, + "_meta": { + "htmlID": "u_content_image_2", + "htmlClassNames": "u_content_image" + } + } + }, + { + "id": "u_content_text_8", + "type": "text", + "values": { + "selectable": true, + "draggable": true, + "duplicatable": true, + "deletable": true, + "hideable": true, + "hideDesktop": false, + "displayCondition": null, + "containerPadding": "12px 36px 22px", + "anchor": "", + "fontWeight": 400, + "fontSize": "11px", + "color": "rgba(255,255,255,0.55)", + "textAlign": "center", + "lineHeight": "155%", + "linkStyle": { + "inherit": true + }, + "_meta": { + "htmlID": "u_content_text_8", + "htmlClassNames": "u_content_text" + }, + "text": "www.targo.ca ·  1867 ch. de la rivière, Ste-Clotilde, QC
© {{year}} TARGO Communications · Tous droits réservés." } } ], diff --git a/scripts/campaigns/templates/gift-email-native-reminder-fr.html b/scripts/campaigns/templates/gift-email-native-reminder-fr.html index b759be7..e9c8e09 100644 --- a/scripts/campaigns/templates/gift-email-native-reminder-fr.html +++ b/scripts/campaigns/templates/gift-email-native-reminder-fr.html @@ -57,7 +57,11 @@
- TARGO + + +
+ TARGO +
@@ -318,7 +322,11 @@
- TARGO + + +
+ TARGO +
diff --git a/services/targo-hub/scripts/build-native-template.js b/services/targo-hub/scripts/build-native-template.js index bbdc59a..dca2dc8 100644 --- a/services/targo-hub/scripts/build-native-template.js +++ b/services/targo-hub/scripts/build-native-template.js @@ -63,6 +63,11 @@ function imageBlock ({ src, alt = '', width = 140, padding = '10px', const id = nextId('u_content_image') const imgTag = `${alt}` const wrapped = href ? `${imgTag}` : imgTag + // Centering an img with display:block via text-align doesn't work — the + // text-align prop only affects inline content. The robust email-client + // pattern (used by MJML, Litmus, Mailchimp) is to wrap the img in a + // nested table with align="", which Outlook 2007-2019 respects + // alongside modern clients. return { json: { id, type: 'image', @@ -76,7 +81,11 @@ function imageBlock ({ src, alt = '', width = 140, padding = '10px', }, html: `
- ${wrapped} + + +
+ ${wrapped} +
`, } diff --git a/services/targo-hub/scripts/templates-spec/gift-email-fr-native.js b/services/targo-hub/scripts/templates-spec/gift-email-fr-native.js index 61d65b8..653e042 100644 --- a/services/targo-hub/scripts/templates-spec/gift-email-fr-native.js +++ b/services/targo-hub/scripts/templates-spec/gift-email-fr-native.js @@ -18,7 +18,7 @@ module.exports = { ], { backgroundColor: "#F5FAF7", border: '1px solid #e5e7eb' }), row([ - imageBlock({ src: "https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content", alt: "TARGO", width: 140, padding: "28px 36px 22px", textAlign: "left" }), // header-logo + imageBlock({ src: "https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content", alt: "TARGO", width: 140, padding: "28px 36px 22px", textAlign: "center" }), // header-logo (centered) textBlock({ html: "Bonjour {{firstname}},", padding: "10px 25px 14px", fontSize: "16px", fontWeight: 400, color: "#374151", textAlign: "left", lineHeight: "150%" }), // greeting textBlock({ html: "Avec l'arrivée de l'été, voici un cadeau pour toi, disponible pour un temps limité.

On veut te remercier pour ta loyauté envers l'achat local.
Comme toi, on aime les connexions stables et les relations durables.", padding: "10px 25px 14px", fontSize: "16px", fontWeight: 400, color: "#374151", textAlign: "justify", lineHeight: "150%" }), // intro textBlock({ html: "Grâce à la confiance de nos clients, on offre maintenant les forfaits à la plus haute vitesse dans le secteur, jusqu'à 3.5 Gbit/s.
Que tu souhaites plus de vitesse, battre une autre offre ou faire optimiser des équipements, n'hésite pas. On est juste à côté et on aime aider.", padding: "10px 25px 0px", fontSize: "16px", fontWeight: 400, color: "#374151", textAlign: "justify", lineHeight: "150%" }), // intro @@ -37,7 +37,8 @@ module.exports = { ], { backgroundColor: "#F5FAF7", border: '1px solid #e5e7eb' }), row([ - htmlBlock({ html: "
\"TARGO\"
www.targo.ca ·  1867 ch. de la rivière, Ste-Clotilde, QC
© {{year}} TARGO Communications · Tous droits réservés.
", padding: "26px 36px 22px" }), // footer-band + imageBlock({ src: "https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content", alt: "TARGO", width: 120, padding: "26px 36px 0", textAlign: "center" }), // footer-logo (split for proper centering) + textBlock({ html: "www.targo.ca ·  1867 ch. de la rivière, Ste-Clotilde, QC
© {{year}} TARGO Communications · Tous droits réservés.", padding: "12px 36px 22px", fontSize: "11px", color: "rgba(255,255,255,0.55)", textAlign: "center", lineHeight: "155%" }), // footer-text ], { backgroundColor: "#1C1E26", border: '1px solid #e5e7eb' }), ], diff --git a/services/targo-hub/templates/gift-email-fr-native.html b/services/targo-hub/templates/gift-email-fr-native.html index 10ce4df..9270a57 100644 --- a/services/targo-hub/templates/gift-email-fr-native.html +++ b/services/targo-hub/templates/gift-email-fr-native.html @@ -56,8 +56,12 @@
-
- TARGO +
+ + +
+ TARGO +
@@ -161,8 +165,17 @@
- + +
-
TARGO
www.targo.ca ·  1867 ch. de la rivière, Ste-Clotilde, QC
© {{year}} TARGO Communications · Tous droits réservés.
+ + +
+ TARGO +
+
+ +
+
www.targo.ca ·  1867 ch. de la rivière, Ste-Clotilde, QC
© {{year}} TARGO Communications · Tous droits réservés.
diff --git a/services/targo-hub/templates/gift-email-fr-native.json b/services/targo-hub/templates/gift-email-fr-native.json index 01c74a9..be3f72b 100644 --- a/services/targo-hub/templates/gift-email-fr-native.json +++ b/services/targo-hub/templates/gift-email-fr-native.json @@ -2,11 +2,11 @@ "counters": { "u_row": 4, "u_column": 4, - "u_content_text": 7, - "u_content_image": 1, + "u_content_text": 8, + "u_content_image": 2, "u_content_button": 1, "u_content_divider": 0, - "u_content_html": 6 + "u_content_html": 5 }, "body": { "id": "u_body", @@ -116,7 +116,7 @@ "autoWidth": false, "maxWidth": "140px" }, - "textAlign": "left", + "textAlign": "center", "altText": "TARGO", "action": { "name": "web", @@ -564,8 +564,8 @@ "id": "u_column_4", "contents": [ { - "id": "u_content_html_6", - "type": "html", + "id": "u_content_image_2", + "type": "image", "values": { "selectable": true, "draggable": true, @@ -574,13 +574,56 @@ "hideable": true, "hideDesktop": false, "displayCondition": null, - "containerPadding": "26px 36px 22px", + "containerPadding": "26px 36px 0", "anchor": "", - "_meta": { - "htmlID": "u_content_html_6", - "htmlClassNames": "u_content_html" + "src": { + "url": "https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content", + "width": 120, + "height": "auto", + "autoWidth": false, + "maxWidth": "120px" }, - "html": "
\"TARGO\"
www.targo.ca ·  1867 ch. de la rivière, Ste-Clotilde, QC
© {{year}} TARGO Communications · Tous droits réservés.
" + "textAlign": "center", + "altText": "TARGO", + "action": { + "name": "web", + "values": { + "href": "", + "target": "_blank" + } + }, + "_meta": { + "htmlID": "u_content_image_2", + "htmlClassNames": "u_content_image" + } + } + }, + { + "id": "u_content_text_8", + "type": "text", + "values": { + "selectable": true, + "draggable": true, + "duplicatable": true, + "deletable": true, + "hideable": true, + "hideDesktop": false, + "displayCondition": null, + "containerPadding": "12px 36px 22px", + "anchor": "", + "fontWeight": 400, + "fontSize": "11px", + "color": "rgba(255,255,255,0.55)", + "textAlign": "center", + "lineHeight": "155%", + "linkStyle": { + "inherit": true + }, + "_meta": { + "htmlID": "u_content_text_8", + "htmlClassNames": "u_content_text" + }, + "text": "www.targo.ca ·  1867 ch. de la rivière, Ste-Clotilde, QC
© {{year}} TARGO Communications · Tous droits réservés." } } ], diff --git a/services/targo-hub/templates/gift-email-native-reminder-fr.html b/services/targo-hub/templates/gift-email-native-reminder-fr.html index b759be7..e9c8e09 100644 --- a/services/targo-hub/templates/gift-email-native-reminder-fr.html +++ b/services/targo-hub/templates/gift-email-native-reminder-fr.html @@ -57,7 +57,11 @@
- TARGO + + +
+ TARGO +
@@ -318,7 +322,11 @@
- TARGO + + +
+ TARGO +