Re: Email images are being removed in Outlook's PC app

sgianaca · ‎04-27-2022

Hope I'm posting this in the correct place. I'm redoing our company's email template and I've hit a roadblock. Microsoft Outlook seems to be removing images and some element stylings when the email is viewed from the PC app. Outlook in browser or on the Mac app works just fine. It's almost like the normal classes, or mkToImg classes are being completely ignored. Could someone help me address this? I have the email code below (swapped in dummy copy and links). Some of it is cannibalized from old templates that were made before my time:

----------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">


<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->


<title> Title Text </title>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0 " />
<meta name="format-detection" content="telephone=no" />
<meta class="mktoColor" id="Full_Body_background" mktoname="Full Body background Color" default="#f0f2f5" />
<meta class="mktoColor" id="Dark_blue_Background" mktoname="Dark Blue Background color" default="#011833" />
<meta class="mktoColor" id="Light_blue_Background" mktoname="Light Blue Background color" default="#e3effd" />
<meta class="mktoColor" id="White_Background" mktoname="White Background color" default="#ffffff" />
<meta class="mktoColor" id="CTA_background_color" mktoname="CTA background color" default="#1270e2" />
<meta class="mktoColor" id="CTA_text_color" mktoname="CTA text color" default="#ffffff" />
<meta class="mktoImg" id="HeroBackgroundImage" mktoname="Hero Background Image" default="BackgroundImagePlaceholder.jpg" mktomodulescope="true" />
<meta class="mktoImg" id="FullHeroBackgroundImage" mktoname="Full Hero Background Image" default="LargeBackgroundImagePlaceholder.jpg" mktomodulescope="true" />


<style type="text/css">
body { margin: 0; padding: 0; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; }
img { border: 0 !important; outline: none !important; }
p { Margin: 0px !important; Padding: 0px !important; }
table { border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; }
td, a, span { border-collapse: collapse; mso-line-height-rule: exactly; }
.ExternalClass * { line-height: 100%; }
.em_defaultlink a { color: inherit; text-decoration: none ; }
.em_g_img + div { display: none; }
a[x-apple-data-detectors], u + .em_body a, #MessageViewBody a { color: inherit; text-decoration: none; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit ; }

.em_border { display:block; border-right:1px solid #e4e5e9; border-left:1px solid #e4e5e9; }
.em_header { border-top-left-radius:13px; border-top-right-radius:13px; display:block; background-size: cover; background-repeat:no-repeat; background-position: center bottom; }
.em_footer { border-bottom-left-radius:13px; border-bottom-right-radius:13px; display:block;}
.em_footer_blank { border-bottom-left-radius:13px; border-bottom-right-radius:13px; display:block; border-right:1px solid #e4e5e9; border-left:1px solid #e4e5e9; border-bottom:1px solid #e4e5e9;}

@media only screen and (max-width:599px) {
.col_head {text-align: center!important; padding-top: 20px!important;}
.col_link {text-align: center!important;}
.em_main_table { width: 100%!important; }
.em_wrapper { width: 100%!important; }
.em_hide { display: none!important; }
.em_pbottom { padding-bottom: 20px!important; }
u+.em_body .em_full_wrap { width: 100%!important; width: 100vw!important; }
.em_pad { padding: 20px 15px!important; }
.em_aside20 { padding: 0px 20px!important; }
.em_pad0 { padding: 0px 0px!important; }
.em_border { border: none!important; border-radius: 0px!important; }
.em_header { border: none!important; border-radius: 0px!important; }
.em_footer { border: none!important; border-radius: 0px!important; }
.em_footer_blank { border: none!important; border-radius: 0px!important; }
.em_pad1 { padding: 35px 20px 30px!important; }
.em_pad2{ padding:45px 20px !important;}
.em_left { text-align: left!important; }
.em_p1 { padding-left: 0px!important; }
.em_pad_ftr { padding: 35px 30px!important; }
}

@media screen and (max-width:480px) {
.em_font20 { font-size: 20px!important; line-height: 25px!important; }
.em_font30 { font-size: 30px!important; line-height: 34px!important; }
.em_logo img{ width:180px !important; height:auto !important;}
}

</style>
</head>


<body bgcolor="#f0f2f5" class="em_body" style="margin:0px auto; padding:0px; background-color:#f0f2f5;">


<!-- == Email Section == -->
<table bgcolor="${Full_Body_background}" width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoContainer em_full_wrap" id="Template" style="table-layout:fixed; background-color:${Full_Body_background};">
<tr class="mktoModule" mktoname="Pre_Header_Section" id="Pre_Header_Section">
<td align="center" valign="top">
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 30px;" class="em_aside20">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" height="10" style="height:10px; font-size:0px; line-height:0px;">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="top">
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top">
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" height="4" style="height:4px; font-size:0px; line-height:0px;"><img src="SpacingImage.gif" alt="" border="0" height="1" width="1" style="display:block;" /></td>
</tr>
<tr>
<td align="left" valign="middle" style="font-size:0px; line-height:0px;">
<div id="Email_img" mktoname="Email_img" class="mktoImg">
<a href="mailto:info@mycompany.com" target="_blank" style="text-decoration:none; color:#6A6E72;"><img src="MailIcon.png" alt="E-mail" border="0" width="10" style="max-width:10px; display:block;" /></a>
</div></td>
</tr>
</tbody>
</table> </td>
<td align="center" valign="top" width="5" style="width:5px; font-size:0px; line-height:0px;">&nbsp;</td>
<td align="left" valign="middle" style="font-family:Arial,sans-serif; color:#6A6E72; font-size:12px; line-height:15px;">
<div id="Text1" mktoname="Text1" class="mktoText">
<a href="mailto:info@mycompany.com" target="_blank" style="text-decoration:none; color:#6A6E72;">info@mycompany.com</a>
</div></td>
<td align="center" valign="top" width="18" style="width:18px; font-size:0px; line-height:0px;">&nbsp;</td>
<td align="center" valign="top">
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" height="4" style="height:4px; font-size:0px; line-height:0px;"><img src="SpacingImage.gif" alt="" border="0" height="1" width="1" style="display:block;" /></td>
</tr>
<tr>
<td align="left" valign="middle" style="font-size:0px; line-height:0px;">
<div id="tel_img" mktoname="tel_img" class="mktoImg">
<a href="tel:5555555555" target="_blank" style="text-decoration:none; color:#6A6E72;"><img src="PhoneIcon.png" alt="Phone" border="0" width="8" style="max-width:8px; display:block;" /></a>
</div></td>
</tr>
</tbody>
</table> </td>
<td align="center" valign="top" width="5" style="width:5px; font-size:0px; line-height:0px;">&nbsp;</td>
<td align="left" valign="middle" style="font-family:Arial,sans-serif; color:#6A6E72; font-size:12px; line-height:15px;">
<div id="Text2" mktoname="Text2" class="mktoText">
<a href="tel:5555555555" target="_blank" style="text-decoration:none; color:#6A6E72;">(555) 555-5555</a>
</div></td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td align="center" valign="top" height="11" style="height:11px; font-size:0px; line-height:0px;">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="top" height="1" bgcolor="#e1e3e6" style="height:1px; background-color:#e1e3e6; font-size:0px; line-height:0px;"><img src="SpacingImage.gif" alt="" border="0" height="1" width="1" style="display:block;" /></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" mktoname="Header_Logo_Section" id="Header_Logo_Section">
<td align="center" valign="top">
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<tbody>
<tr>
<td align="center" valign="top" style="padding:30px 30px;" class="em_logo em_pad">
<div id="Logo_img" mktoname="Logo_img" class="mktoImg">
<a href="homepage.com" target="_blank" style="text-decoration:none;"><img src="CompanyLogo.png" alt="Company Name" border="0" height="42" width="239" style="display:block; max-width:239px; font-size:16px; line-height:25px; font-weight:bold; color:#000000; font-family:Arial, sans-serif;" /></a>
</div></td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" mktoname="Hero_With_CTA" id="Hero_With_CTA899b03b2-bd77-454f-b316-f76afa9def8c">
<td align="center" valign="top">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="max-width:600px; table-layout:fixed;">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 14px;" class="em_pad0">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" class="em_header" height="430px" width="100%" background="${HeroBackgroundImage}" bgcolor="#FFF">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="padding:55px 30px 45px;" class="em_pad1">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="em_defaultlink em_left em_font30" align="center" valign="top" style="color:#001228; font-size:36px; line-height:40px; font-family:Arial,sans-serif; padding-bottom:23px; text-align:center !important; font-weight: bold;">
<div id="Hero_Headline_Text183ce0aa-3690-41ad-9747-e5df798c7ca3" mktoname="Hero_Headline_Text" class="mktoText">
Lorem Ipsum Dolor Sit Amet
</div> </td>
</tr>
<tr>
<td class="em_defaultlink em_pbottom em_left" align="center" valign="top" style="color:#001228; font-size:16px; line-height:20px; font-family:Arial,sans-serif; padding-bottom:40px; text-align:center !important;">
<div id="Hero_Supporting_Headline_Text582b6ee6-dfca-4703-9672-a0476e261eb6" mktoname="Hero_Supporting_Headline_Text" class="mktoText">
Consectetur adipiscing elit duis tempor egestas ligula sit amet fringilla
</div> </td>
</tr>
<tr>
<td align="center" valign="top">
<table align="center" class="em_wrapper" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top">
<table align="center" bgcolor="${CTA_background_color}" border="0" cellspacing="0" cellpadding="0" style="background-color:${CTA_background_color}; border-radius:5px;">
<tbody>
<tr>
<td align="center" valign="middle" height="56" style="height:56px; color:${CTA_text_color}; font-size:16px; font-family:Arial,sans-serif; padding:0px 34px; font-weight: bold; text-transform: uppercase;">
<div id="Hero_CTA_Button_Texte5605ba9-321c-4e7c-8d65-a0d117005dd8" mktoname="Hero_CTA_Button_Text" class="mktoText">
<a href="#" target="_blank" style="text-decoration:none !important; line-height:56px; display:block; color:${CTA_text_color};">Button Text</a>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" mktoname="Content_Section" id="Content_Section">
<td align="center" valign="top">
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 14px;" class="em_pad0">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="${White_Background}" class="em_border" style=" border-left:1px solid #e4e5e9; border-right:1px solid #e4e5e9; display:block; background-color:${White_Background};">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="padding:45px 46px 0;" class="em_pad1">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="em_defaultlink" align="left" valign="top" style="color:#00152E; font-size:16px; line-height:22px; font-family:Arial,sans-serif; padding-bottom:18px;">
<div id="Email_Content" mktoname="Email_Content" class="mktoText">
<p class="p1" style="text-align: center;"><span style="font-size: 20px;"><span data-contrast="none" xml:lang="EN-US" lang="EN-US" class="TextRun MacChromeBold SCXW265479419 BCX0" style="margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; font-variant: normal; color: #000000; font-style: normal;
letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; line-height: 18.3458px; font-family: Calibri, Calibri_EmbeddedFont, Calibri_MSFontService,
sans-serif; font-weight: bold;"><span class="NormalTextRun SCXW265479419 BCX0" style="margin: 0px; padding: 0px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;">Can't miss platform features</span></span></span></p>
<p style="text-align: left;"><span style="font-size: 20px; color: #333333;"></span><br /></p>
<p style="text-align: left;"><span style="font-size: 16px; color: #000000;">Hi {{lead.First Name:default=there}},</span></p>
<p class="p2"><br /></p>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat eros vel ante ullamcorper euismod.</p>
<p class="p2"><br /></p>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat eros vel ante ullamcorper euismod.</p>
<p class="p2"><br /></p>
<p class="p3"><span style="text-decoration: underline;"><span class="s1" style="color: #0000ff;"><a href="ProductPage.com" style="color: #0000ff;" target="_blank"><b>Company Product</b></a></span></span><span class="s2">&nbsp;</span></p>
<p class="p2"><br /></p>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat eros vel ante ullamcorper euismod.&nbsp;</p>
<ul class="ul1">
<li class="li1"><span class="s3"></span>Lorem&nbsp;<br /></li>
<li class="li1"><span class="s3"></span>Ipsum&nbsp;&nbsp;<br /></li>
<li class="li1"><span class="s3"></span>Dolor&nbsp;<br /></li>
</ul>
<p class="p3"><span style="text-decoration: underline;"><span class="s1" style="color: #0000ff;"><a href="ProductPage.com" style="color: #0000ff;" target="_blank"><b>Link Text.</b></a></span></span></p>
<p><br /></p>
<div class="p3">
Best,
</div>
<div class="p1">
My Name&nbsp;
</div>
<div class="p1">
Company Name
</div>
</div></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" mktoname="CTA_Button" id="CTA_Buttonc8ecee15-c2b4-4323-9ee6-62b9366fb279">
<td align="center" valign="top">
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 14px;" class="em_pad0">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="${White_Background}" class="em_border" style="display:block; background-color:${White_Background}; border-right:1px solid #e4e5e9; border-left:1px solid #e4e5e9;">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="padding:35px 30px 35px;" class="em_pad2">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top">
<table align="center" bgcolor="${CTA_background_color}" border="0" cellspacing="0" cellpadding="0" style="background-color:${CTA_background_color}; border-radius:5px;">
<tbody>
<tr>
<td align="center" valign="middle" height="56" style="height:56px; color:${CTA_text_color}; font-size:16px; font-family:Arial,sans-serif; padding:0px 34px; font-weight: bold; text-transform: uppercase;">
<div id="CTA_Button_Text01944a4d-6162-42e0-ab6c-43ee6f2eb5f6" mktoname="CTA_Button_Text" class="mktoText">
<a href="#" target="_blank" style="text-decoration:none; line-height:56px; display:block; color:${CTA_text_color};">Button Copy</a>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" mktoname="Blank_Footer" id="Blank_Footerabacd5f1-f670-47cd-a5fa-6655e99f2b40">
<td align="center" valign="top">
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 14px;" class="em_pad0">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="${White_Background}" class="em_footer_blank">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="padding:5px 0 5px;" class="em_pad2">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="em_defaultlink em_font20" align="center" valign="top">
<div>
&nbsp;
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr class="mktoModule" mktoname="Footer_Section" id="Footer_Section">
<td align="center" valign="top">
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<tbody>
<tr>
<td align="center" valign="top" style="padding:32px 30px;" class="em_pad_ftr">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" valign="top" style="padding-bottom:25px;">
<div id="ftr_logo" mktoname="ftr_logo" class="mktoImg">
<a href="CompanyHomepage.com" target="_blank" style="text-decoration:none;"><img src="CompanyLogo.png" width="188" alt="Company Name" border="0" style="display:block; max-width:188px; font-family:Arial, sans-serif; font-size:16px; line-height:20px; color:#939598; font-weight:bold;" /></a>
</div></td>
</tr>
<tr>
<td class="em_defaultlink" align="center" valign="top" style="font-family:Arial, sans-serif; font-size:14px; line-height:20px; color:#00152E; padding-bottom:25px;">
<div id="ftr_txt1" mktoname="ftr_txt1" class="mktoText">
Company Address
</div></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:25px;">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" valign="middle" style="font-size:0px; line-height:0px;">
<div id="Social_icon1" mktoname="Social_icon1" class="mktoImg">
<a href="CompanyLinkedin.com" target="_blank" style="text-decoration:none;"><img src="LinkedInIcon.png" width="18" alt="LinkedIn" border="0" style="display:block; max-width:18px; font-size:10px; line-height:12px; color:#939598; font-weight:bold;" /></a>
</div></td>
<td width="20" style="width:20px;">&nbsp;</td>
<td align="center" valign="middle" style="font-size:0px; line-height:0px;">
<div id="Social_icon2" mktoname="Social_icon2" class="mktoImg">
<a href="CompanyTwitter.com" target="_blank" style="text-decoration:none;"><img src="TwitterIcon.png" width="20" alt="Twitter" border="0" style="display:block; max-width:20px; font-size:10px; line-height:12px; color:#939598; font-weight:bold;" /></a>
</div></td>
<td width="20" style="width:20px;">&nbsp;</td>
<td align="center" valign="middle" style="font-size:0px; line-height:0px;">
<div id="Social_icon3" mktoname="Social_icon3" class="mktoImg">
<a href="CompanyFacebook.com" target="_blank" style="text-decoration:none;"><img src="FacebookIcon.png" width="17" alt="Facebook" border="0" style="display:block; max-width:17px; font-size:10px; line-height:12px; color:#939598; font-weight:bold;" /></a>
</div></td>
<td width="20" style="width:20px;">&nbsp;</td>
<td align="center" valign="middle" style="font-size:0px; line-height:0px;">
<div id="Social_icon4" mktoname="Social_icon4" class="mktoImg">
<a href="YoutubeVideoLink.com" target="_blank" style="text-decoration:none;"><img src="YoutubeIcon.png" width="22" alt="YouTube" border="0" style="display:block; max-width:22px; font-size:10px; line-height:12px; color:#939598; font-weight:bold;" /></a>
</div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td height="1" style="height:1px; font-size:0px; line-height:0px;" bgcolor="#e1e3e6"><img src="SpacerImage.gif" width="1" height="1" alt="" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="12" style="height:12px; font-size:0px; line-height:0px;">&nbsp;</td>
</tr>
<tr>
<td class="em_defaultlink" align="center" valign="top" style="font-family:Arial, sans-serif; font-size:12px; line-height:16px; color:#6A6E72;">
<div id="ftr_txt2" mktoname="ftr_txt2" class="mktoText">
<a href="{{system.unsubscribeLink}}" target="_blank" style="text-decoration:none; color:#6A6E72;">Unsubscribe</a> |
<a href="CompanyPrivacyPolicy.com" target="_blank" style="text-decoration:none; color:#6A6E72;">Privacy Policy</a>
</div></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td class="em_hide" style="line-height:1px;min-width:600px;background-color:#f0f2f5;"><img alt="Spacer" src="SpacerImage.gif" height="1" width="600" style="max-height:1px; min-height:1px; display:block; width:600px; min-width:600px;" border="0" /></td>
</tr>
</tbody>
</table></td>
</tr>
</table>
</body>
</html>

Darshil_Shah1 · ‎04-28-2022

Well, to all - I tried debugging this by importing the template and creating the email from it in the Marketo. I replaced the images with the image URLs (hosted in the Marketo's DS) and then sent out the sample email. Turns out except the image with HeroBackgroundImage id - all the images got loaded in the windows outlook desktop app as they should, and of-course on other clients, and on outlook web - all the images including HeroBackgroundImage did render.

Looks like HeroBackgroundImage may need some styles added for it to become outlook desktop app friendly.

View solution in original post

Jasbir_Kaur · ‎04-27-2022

Hi @sgianaca ,

Try to use the complete URL once, not only image name and extension.

Thanks!

Jasbir

ajavinash · ‎04-28-2022

@sgianaca
Also, you can upload all your images into Design Studio and reference the link with respect to each image.
Thanks,
Avinash

Darshil_Shah1 · ‎04-28-2022

Well, to all - I tried debugging this by importing the template and creating the email from it in the Marketo. I replaced the images with the image URLs (hosted in the Marketo's DS) and then sent out the sample email. Turns out except the image with HeroBackgroundImage id - all the images got loaded in the windows outlook desktop app as they should, and of-course on other clients, and on outlook web - all the images including HeroBackgroundImage did render.

Looks like HeroBackgroundImage may need some styles added for it to become outlook desktop app friendly.

sgianaca · ‎05-02-2022

Thanks so much for taking the time to test that. I've tried reinforcing the HeroBackgroundImage in the .emheader class as a background url, but that doesn't seem to work. Any advice on where and which stylings I should try to attribute to HeroBackgroundImage that Outlook will read?

Jo_Pitts1 · ‎05-02-2022

To do background images that are supported in Outlook desktop app on windows, you need some VML code.

Here is an example that allows a smaller 'badge' to be floated over a background image. There is also some special case mobile code as the badge goes in a different size to make it still readable.

              <tr class="mktoModule" id="mkto-myClient-badged" mktoAddByDefault="false" mktoName="myCLient Badged Header">
                <td class="mk" bgcolor="${mkto-content-bg-color}" style="background-color: ${mkto-content-bg-color}; width:100%;"> 
                  <table class="mk" role="presentation" width="600" style="width:600px;" cellpadding="0" cellspacing="0" border="0" align="center">
                    <tr class="mBYE" style="display: block;">
                      <td align="center" bgcolor="${mkto-content-bg-color}" background="${mkto-badged-header}" width="600" height="340" valign="top" style="height:340px; border: 0px; background: url('${mkto-badged-header}'); background-repeat: no-repeat; background-position: center;">
                        <!--[if gte mso 9]>
                          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:340px;">
                          <v:fill type="frame" src="${mkto-badged-header}" color="#7bceeb" />
                          <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                        <![endif]-->
                            <table valign="top" role="presentation" width="600" style="width:600px; height:340px; vertical-align: top; padding 0px 0px 0px 0px; margin: 0 auto;" cellpadding="0" cellspacing="0" border="0" align="center">
                              <tr>
                                <td width="600" height="340" align="right" valign="top" style="width:100%; max-width: 600px; height:340px; text-align: left; padding-top:0px; padding-right: 0px; mso-padding-right-alt: 0pt; vertical-align: top;">
                                  <img bgcolor="none" valign="top" src="https://info.myClient.co.nz/rs/xxx-yyy-zzz/images/myCLient - Logo Inverse - 240x121.png" width="240" height="auto" border="0" style="background-color:transparent ; background:none; display:inline-block; vertical-align:top; text-align: right;">
                                </td>
                              </tr>
                            </table>
                        <!--[if gte mso 9]>
                          </v:textbox>
                          </v:fill>
                          </v:rect>
                        <![endif]-->
                      </td>
                    </tr>
                    <!--[if !mso]><!-->
                    <tr class="mHI" style="display: none;">
                      <td class="bgi" align="left" bgcolor="${mkto-content-bg-color}" background="${mkto-badged-header}" valign="top" style="height:calc( 100vw / 1.5 ); width:100%;  background: url('${mkto-badged-header}') top left / contain no-repeat;"> 
                        <img valign="top" align="left" src="https://info.myClient.co.nz/rs/xxx-yyy-xxx/images/myClient- Logo Inverse - 240x121.png" width="33%" height="auto" border="0" style="background-color:transparent; display:block; vertical-align:top; text-align: left;" /> 
                      </td> 
                    </tr>                       
                    <!--<![endif]-->
                  </table>
                </td> 
              </tr>

Let me know if that is helpful

sgianaca · ‎05-03-2022

This was incredibly helpful! I studied your code, which inspired a bit of a deep-dive on VML injections in general. A VERY cool way to address this issue. Thanks so much! I found a working solution.

Jo_Pitts1 · ‎05-03-2022

@sgianaca ,

I'm please you were able to leverage my module snippet. I must do a blog post on the topic of VML image controls.

Can you mark my answer as being correct please?

Cheers

Jo