fix(campaigns/templates): center logos via nested-table pattern

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 <table align="<textAlign>"> 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 </td> 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 <noreply@anthropic.com>
This commit is contained in:
louispaulb 2026-06-01 18:45:30 -04:00
parent 0fd1e9f6b5
commit 0fb9089f4e
8 changed files with 175 additions and 37 deletions

View File

@ -56,10 +56,14 @@
<div style="height:100%;width:100% !important;"> <div style="height:100%;width:100% !important;">
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]--> <!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="padding:28px 36px 22px;text-align:left;" align="left"> <tbody><tr><td style="padding:28px 36px 22px;text-align:center;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse:collapse;border-spacing:0;margin:0 auto;">
<tbody><tr><td style="width:140px;">
<img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="140" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:140px;max-width:100%;" /> <img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="140" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:140px;max-width:100%;" />
</td></tr></tbody> </td></tr></tbody>
</table> </table>
</td></tr></tbody>
</table>
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:10px 25px 14px;font-family:'Plus Jakarta Sans', sans-serif;" align="left"> <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:10px 25px 14px;font-family:'Plus Jakarta Sans', sans-serif;" align="left">
<div class="u_content_text" style="font-size:16px;font-weight:400;color:#374151;text-align:left;line-height:150%;">Bonjour {{firstname}},</div> <div class="u_content_text" style="font-size:16px;font-weight:400;color:#374151;text-align:left;line-height:150%;">Bonjour {{firstname}},</div>
@ -161,8 +165,17 @@
<div style="height:100%;width:100% !important;"> <div style="height:100%;width:100% !important;">
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]--> <!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="padding:26px 36px 22px;"> <tbody><tr><td style="padding:26px 36px 0;text-align:center;" align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:120px;"><img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="120" height="auto"/></td></tr></tbody></table><td align="center" style="font-size:0px;padding:18px 0 0;word-break:break-word;"><div style="font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:11px;line-height:1.55;text-align:center;color:rgba(255,255,255,0.55);"><a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a>&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />© {{year}} TARGO Communications · Tous droits réservés.</div></td> <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse:collapse;border-spacing:0;margin:0 auto;">
<tbody><tr><td style="width:120px;">
<img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="120" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:120px;max-width:100%;" />
</td></tr></tbody>
</table>
</td></tr></tbody>
</table>
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:12px 36px 22px;font-family:'Plus Jakarta Sans', sans-serif;" align="center">
<div class="u_content_text" style="font-size:11px;font-weight:400;color:rgba(255,255,255,0.55);text-align:center;line-height:155%;"><a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a>&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />© {{year}} TARGO Communications · Tous droits réservés.</div>
</td></tr></tbody> </td></tr></tbody>
</table> </table>
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]--> <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->

View File

@ -2,11 +2,11 @@
"counters": { "counters": {
"u_row": 4, "u_row": 4,
"u_column": 4, "u_column": 4,
"u_content_text": 7, "u_content_text": 8,
"u_content_image": 1, "u_content_image": 2,
"u_content_button": 1, "u_content_button": 1,
"u_content_divider": 0, "u_content_divider": 0,
"u_content_html": 6 "u_content_html": 5
}, },
"body": { "body": {
"id": "u_body", "id": "u_body",
@ -116,7 +116,7 @@
"autoWidth": false, "autoWidth": false,
"maxWidth": "140px" "maxWidth": "140px"
}, },
"textAlign": "left", "textAlign": "center",
"altText": "TARGO", "altText": "TARGO",
"action": { "action": {
"name": "web", "name": "web",
@ -564,8 +564,8 @@
"id": "u_column_4", "id": "u_column_4",
"contents": [ "contents": [
{ {
"id": "u_content_html_6", "id": "u_content_image_2",
"type": "html", "type": "image",
"values": { "values": {
"selectable": true, "selectable": true,
"draggable": true, "draggable": true,
@ -574,13 +574,56 @@
"hideable": true, "hideable": true,
"hideDesktop": false, "hideDesktop": false,
"displayCondition": null, "displayCondition": null,
"containerPadding": "26px 36px 22px", "containerPadding": "26px 36px 0",
"anchor": "", "anchor": "",
"_meta": { "src": {
"htmlID": "u_content_html_6", "url": "https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content",
"htmlClassNames": "u_content_html" "width": 120,
"height": "auto",
"autoWidth": false,
"maxWidth": "120px"
}, },
"html": "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"border-collapse:collapse;border-spacing:0px;\"><tbody><tr><td style=\"width:120px;\"><img alt=\"TARGO\" src=\"https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content\" style=\"border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;\" width=\"120\" height=\"auto\"/></td></tr></tbody></table><td align=\"center\" style=\"font-size:0px;padding:18px 0 0;word-break:break-word;\"><div style=\"font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:11px;line-height:1.55;text-align:center;color:rgba(255,255,255,0.55);\"><a href=\"https://www.targo.ca\" style=\"color:rgba(255,255,255,0.7);text-decoration:none;\">www.targo.ca</a>&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />© {{year}} TARGO Communications · Tous droits réservés.</div></td>" "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": "<a href=\"https://www.targo.ca\" style=\"color:rgba(255,255,255,0.7);text-decoration:none;\">www.targo.ca</a>&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />© {{year}} TARGO Communications · Tous droits réservés."
} }
} }
], ],

View File

@ -57,8 +57,12 @@
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]--> <!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="padding:28px 36px 22px;text-align:center;" align="center"> <tbody><tr><td style="padding:28px 36px 22px;text-align:center;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse:collapse;border-spacing:0;margin:0 auto;">
<tbody><tr><td style="width:140px;">
<img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="140" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:140px;max-width:100%;" /> <img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="140" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:140px;max-width:100%;" />
</td></tr></tbody> </td></tr></tbody>
</table>
</td></tr></tbody>
</table> </table>
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]--> <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
</div> </div>
@ -318,9 +322,13 @@
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]--> <!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="padding:26px 36px 0;text-align:center;" align="center"> <tbody><tr><td style="padding:26px 36px 0;text-align:center;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse:collapse;border-spacing:0;margin:0 auto;">
<tbody><tr><td style="width:120px;">
<img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="120" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:120px;max-width:100%;" /> <img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="120" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:120px;max-width:100%;" />
</td></tr></tbody> </td></tr></tbody>
</table> </table>
</td></tr></tbody>
</table>
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:12px 36px 22px;font-family:'Plus Jakarta Sans', sans-serif;" align="center"> <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:12px 36px 22px;font-family:'Plus Jakarta Sans', sans-serif;" align="center">
<div class="u_content_text" style="font-size:11px;font-weight:400;color:rgba(255,255,255,0.55);text-align:center;line-height:155%;"><a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a> · 1867 ch. de la rivière, Ste-Clotilde, QC<br/>© {{year}} TARGO Communications · Tous droits réservés.</div> <div class="u_content_text" style="font-size:11px;font-weight:400;color:rgba(255,255,255,0.55);text-align:center;line-height:155%;"><a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a> · 1867 ch. de la rivière, Ste-Clotilde, QC<br/>© {{year}} TARGO Communications · Tous droits réservés.</div>

View File

@ -63,6 +63,11 @@ function imageBlock ({ src, alt = '', width = 140, padding = '10px',
const id = nextId('u_content_image') const id = nextId('u_content_image')
const imgTag = `<img alt="${alt}" src="${src}" width="${width}" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:${width}px;max-width:100%;" />` const imgTag = `<img alt="${alt}" src="${src}" width="${width}" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:${width}px;max-width:100%;" />`
const wrapped = href ? `<a href="${href}" target="_blank" style="text-decoration:none;">${imgTag}</a>` : imgTag const wrapped = href ? `<a href="${href}" target="_blank" style="text-decoration:none;">${imgTag}</a>` : 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="<textAlign>", which Outlook 2007-2019 respects
// alongside modern clients.
return { return {
json: { json: {
id, type: 'image', id, type: 'image',
@ -76,8 +81,12 @@ function imageBlock ({ src, alt = '', width = 140, padding = '10px',
}, },
html: ` <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> html: ` <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="padding:${padding};text-align:${textAlign};" align="${textAlign}"> <tbody><tr><td style="padding:${padding};text-align:${textAlign};" align="${textAlign}">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="${textAlign}" style="border-collapse:collapse;border-spacing:0;${textAlign === 'center' ? 'margin:0 auto;' : ''}">
<tbody><tr><td style="width:${width}px;">
${wrapped} ${wrapped}
</td></tr></tbody> </td></tr></tbody>
</table>
</td></tr></tbody>
</table>`, </table>`,
} }
} }

View File

@ -18,7 +18,7 @@ module.exports = {
], { backgroundColor: "#F5FAF7", border: '1px solid #e5e7eb' }), ], { backgroundColor: "#F5FAF7", border: '1px solid #e5e7eb' }),
row([ 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: "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 <strong>cadeau pour toi, disponible pour un temps limité</strong>.<br><br>On veut te remercier pour ta loyauté envers l'achat local.<br />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: "Avec l'arrivée de l'été, voici un <strong>cadeau pour toi, disponible pour un temps limité</strong>.<br><br>On veut te remercier pour ta loyauté envers l'achat local.<br />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 à <strong>la plus haute vitesse dans le secteur</strong>, jusqu'à <strong>3.5&nbsp;Gbit/s</strong>.<br />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 textBlock({ html: "Grâce à la confiance de nos clients, on offre maintenant les forfaits à <strong>la plus haute vitesse dans le secteur</strong>, jusqu'à <strong>3.5&nbsp;Gbit/s</strong>.<br />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' }), ], { backgroundColor: "#F5FAF7", border: '1px solid #e5e7eb' }),
row([ row([
htmlBlock({ html: "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"border-collapse:collapse;border-spacing:0px;\"><tbody><tr><td style=\"width:120px;\"><img alt=\"TARGO\" src=\"https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content\" style=\"border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;\" width=\"120\" height=\"auto\"/></td></tr></tbody></table><td align=\"center\" style=\"font-size:0px;padding:18px 0 0;word-break:break-word;\"><div style=\"font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:11px;line-height:1.55;text-align:center;color:rgba(255,255,255,0.55);\"><a href=\"https://www.targo.ca\" style=\"color:rgba(255,255,255,0.7);text-decoration:none;\">www.targo.ca</a>&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />© {{year}} TARGO Communications · Tous droits réservés.</div></td>", 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: "<a href=\"https://www.targo.ca\" style=\"color:rgba(255,255,255,0.7);text-decoration:none;\">www.targo.ca</a>&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />© {{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' }), ], { backgroundColor: "#1C1E26", border: '1px solid #e5e7eb' }),
], ],

View File

@ -56,10 +56,14 @@
<div style="height:100%;width:100% !important;"> <div style="height:100%;width:100% !important;">
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]--> <!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="padding:28px 36px 22px;text-align:left;" align="left"> <tbody><tr><td style="padding:28px 36px 22px;text-align:center;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse:collapse;border-spacing:0;margin:0 auto;">
<tbody><tr><td style="width:140px;">
<img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="140" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:140px;max-width:100%;" /> <img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="140" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:140px;max-width:100%;" />
</td></tr></tbody> </td></tr></tbody>
</table> </table>
</td></tr></tbody>
</table>
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:10px 25px 14px;font-family:'Plus Jakarta Sans', sans-serif;" align="left"> <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:10px 25px 14px;font-family:'Plus Jakarta Sans', sans-serif;" align="left">
<div class="u_content_text" style="font-size:16px;font-weight:400;color:#374151;text-align:left;line-height:150%;">Bonjour {{firstname}},</div> <div class="u_content_text" style="font-size:16px;font-weight:400;color:#374151;text-align:left;line-height:150%;">Bonjour {{firstname}},</div>
@ -161,8 +165,17 @@
<div style="height:100%;width:100% !important;"> <div style="height:100%;width:100% !important;">
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]--> <!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="padding:26px 36px 22px;"> <tbody><tr><td style="padding:26px 36px 0;text-align:center;" align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:120px;"><img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="120" height="auto"/></td></tr></tbody></table><td align="center" style="font-size:0px;padding:18px 0 0;word-break:break-word;"><div style="font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:11px;line-height:1.55;text-align:center;color:rgba(255,255,255,0.55);"><a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a>&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />© {{year}} TARGO Communications · Tous droits réservés.</div></td> <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse:collapse;border-spacing:0;margin:0 auto;">
<tbody><tr><td style="width:120px;">
<img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="120" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:120px;max-width:100%;" />
</td></tr></tbody>
</table>
</td></tr></tbody>
</table>
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:12px 36px 22px;font-family:'Plus Jakarta Sans', sans-serif;" align="center">
<div class="u_content_text" style="font-size:11px;font-weight:400;color:rgba(255,255,255,0.55);text-align:center;line-height:155%;"><a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a>&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />© {{year}} TARGO Communications · Tous droits réservés.</div>
</td></tr></tbody> </td></tr></tbody>
</table> </table>
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]--> <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->

View File

@ -2,11 +2,11 @@
"counters": { "counters": {
"u_row": 4, "u_row": 4,
"u_column": 4, "u_column": 4,
"u_content_text": 7, "u_content_text": 8,
"u_content_image": 1, "u_content_image": 2,
"u_content_button": 1, "u_content_button": 1,
"u_content_divider": 0, "u_content_divider": 0,
"u_content_html": 6 "u_content_html": 5
}, },
"body": { "body": {
"id": "u_body", "id": "u_body",
@ -116,7 +116,7 @@
"autoWidth": false, "autoWidth": false,
"maxWidth": "140px" "maxWidth": "140px"
}, },
"textAlign": "left", "textAlign": "center",
"altText": "TARGO", "altText": "TARGO",
"action": { "action": {
"name": "web", "name": "web",
@ -564,8 +564,8 @@
"id": "u_column_4", "id": "u_column_4",
"contents": [ "contents": [
{ {
"id": "u_content_html_6", "id": "u_content_image_2",
"type": "html", "type": "image",
"values": { "values": {
"selectable": true, "selectable": true,
"draggable": true, "draggable": true,
@ -574,13 +574,56 @@
"hideable": true, "hideable": true,
"hideDesktop": false, "hideDesktop": false,
"displayCondition": null, "displayCondition": null,
"containerPadding": "26px 36px 22px", "containerPadding": "26px 36px 0",
"anchor": "", "anchor": "",
"_meta": { "src": {
"htmlID": "u_content_html_6", "url": "https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content",
"htmlClassNames": "u_content_html" "width": 120,
"height": "auto",
"autoWidth": false,
"maxWidth": "120px"
}, },
"html": "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"border-collapse:collapse;border-spacing:0px;\"><tbody><tr><td style=\"width:120px;\"><img alt=\"TARGO\" src=\"https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content\" style=\"border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;\" width=\"120\" height=\"auto\"/></td></tr></tbody></table><td align=\"center\" style=\"font-size:0px;padding:18px 0 0;word-break:break-word;\"><div style=\"font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:11px;line-height:1.55;text-align:center;color:rgba(255,255,255,0.55);\"><a href=\"https://www.targo.ca\" style=\"color:rgba(255,255,255,0.7);text-decoration:none;\">www.targo.ca</a>&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />© {{year}} TARGO Communications · Tous droits réservés.</div></td>" "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": "<a href=\"https://www.targo.ca\" style=\"color:rgba(255,255,255,0.7);text-decoration:none;\">www.targo.ca</a>&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />© {{year}} TARGO Communications · Tous droits réservés."
} }
} }
], ],

View File

@ -57,8 +57,12 @@
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]--> <!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="padding:28px 36px 22px;text-align:center;" align="center"> <tbody><tr><td style="padding:28px 36px 22px;text-align:center;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse:collapse;border-spacing:0;margin:0 auto;">
<tbody><tr><td style="width:140px;">
<img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="140" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:140px;max-width:100%;" /> <img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="140" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:140px;max-width:100%;" />
</td></tr></tbody> </td></tr></tbody>
</table>
</td></tr></tbody>
</table> </table>
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]--> <!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
</div> </div>
@ -318,9 +322,13 @@
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]--> <!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="padding:26px 36px 0;text-align:center;" align="center"> <tbody><tr><td style="padding:26px 36px 0;text-align:center;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse:collapse;border-spacing:0;margin:0 auto;">
<tbody><tr><td style="width:120px;">
<img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="120" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:120px;max-width:100%;" /> <img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="120" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:120px;max-width:100%;" />
</td></tr></tbody> </td></tr></tbody>
</table> </table>
</td></tr></tbody>
</table>
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:12px 36px 22px;font-family:'Plus Jakarta Sans', sans-serif;" align="center"> <tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:12px 36px 22px;font-family:'Plus Jakarta Sans', sans-serif;" align="center">
<div class="u_content_text" style="font-size:11px;font-weight:400;color:rgba(255,255,255,0.55);text-align:center;line-height:155%;"><a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a> · 1867 ch. de la rivière, Ste-Clotilde, QC<br/>© {{year}} TARGO Communications · Tous droits réservés.</div> <div class="u_content_text" style="font-size:11px;font-weight:400;color:rgba(255,255,255,0.55);text-align:center;line-height:155%;"><a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a> · 1867 ch. de la rivière, Ste-Clotilde, QC<br/>© {{year}} TARGO Communications · Tous droits réservés.</div>