Example on how to embed multiple images into an HTML email. Note, if you try to use newer HTML elements such as flexbox you will have trouble. If you use a simple table it will work. When I tried with flexbox the styling wasn't recognized.
public static void Main(string[] args)
{
var html = File.ReadAllText("c:\test.html");
var altView = GetAlternateView(html);
SendEmail(new List<MailRecipients> {new MailAddress([email protected])}, "Hello!", "Images in Email Test!", true, altView);
}
public static bool SendEmail(List<MailAddress> recipients, string body, string subject, bool html, AlternateView view, MailPriority priority = MailPriority.Normal)
{
try
{
MailMessage message = new MailMessage();
SmtpClient smtp = new SmtpClient();
message.From = new MailAddress(ConfigLookup.GetStringValue(ConfigNames.EmailFrom));
recipients.ForEach(r => message.To.Add(new MailAddress(r.Address)));
message.Subject = subject;
message.IsBodyHtml = html;
message.AlternateViews.Add(view);
message.Priority = priority;
smtp.Port = 25;
smtp.Host = youremailhost;
smtp.EnableSsl = yes;
smtp.UseDefaultCredentials = false;
smtp.DeliveryMethod = SmtpDeliveryMethod.Network;
smtp.Send(message);
return true;
}
catch (Exception e)
{
return false;
}
}
private AlternateView GetAlternateView(string html)
{
var logoPath = ConfigLookup.GetStringValue(ConfigNames.LogoPath);
LinkedResource logoResource = new LinkedResource(logoPath);
// ContentID must match the 'cid:contentId' in the html
logoResource.ContentId = "logo";
// Without a Mime type the images will show up as attached .bin files
logoResource.ContentType = new ContentType("image/png");
logoResource.TransferEncoding = TransferEncoding.Base64;
var heroPath = ConfigLookup.GetStringValue(ConfigNames.HeroPath);
LinkedResource heroResource = new LinkedResource(heroPath);
// ContentID must match the 'cid:contentId' in the html
heroResource.ContentId = "hero";
// Without a Mime type the images will show up as attached .bin files
heroResource.ContentType = new ContentType("image/png");
heroResource.TransferEncoding = TransferEncoding.Base64;
AlternateView alternateView = AlternateView.CreateAlternateViewFromString(html, null, MediaTypeNames.Text.Html);
alternateView.LinkedResources.Add(logoResource);
alternateView.LinkedResources.Add(heroResource);
return alternateView;
}
In your Html, the main thing that links up the images to the LinkedResource is the 'cid:contentId' must match:
<a href="https://somesite.com" target="_blank" style="color:#033254;">
<img src="cid:logo" width="218" alt="Company logo" style="max-width:100%;height:auto;" />
</a>
<a href="https://somesite.com" target="_blank" style="color:#033254;">
<img src="cid:hero" width="218" alt="Company hero" style="max-width:100%;height:auto;" />
</a>
Full HTML:
<!DOCTYPE html>
<html lang="en" xmlns="https://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Shipping Confirmation from Products Company</title>
</head>
<body style="margin:0;padding:0;word-spacing:normal;">
<div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" >
<tr>
<td align="center">
<div class="outer" style="width:96%;max-width:660px;margin:20px auto;background-color:#ffffff;">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="background-color:rgb(35, 68, 107);">
<td align="center" style="padding:20px 0;">
<a href="https://yahoo.com" target="_blank" style="color:#033254;">
<img src="cid:logo" width="218" alt="Products Company logo" style="max-width:100%;height:auto;" />
</a>
</td>
</tr>
<tr style="background-color:#ffffff;;">
<td align="center" style="padding:20px 0;">
<a href="https://yahoo.com" target="_blank" style="color:#033254;">
<img src="cid:hero" width="400" alt="Products Company hero" style="max-width:100%;height:auto;" />
</a>
</td>
</tr>
<tr style="background-color:rgb(35, 68, 107);">
<td style="padding:32px; text-align:center;">
<h1 style="margin-top:0;margin-bottom:16px;font-family:Arial,sans-serif;font-size:24px;line-height:30px;letter-spacing:1px;font-weight:bold;color:#ffffff;">
Shipping Confirmation
</h1>
<hr style="border:0;background-color:rgb(35, 68, 107);border-bottom:.5px solid #ffffff;width:66%;"/>
<h3 style="margin:16px 0;font-family:Arial,sans-serif;font-size:18px;line-height:24px;letter-spacing:1px;font-weight:bold;color:#ffffff;">Order# {0}</h3>
<h3 style="margin:16px 0;font-family:Arial,sans-serif;font-size:18px;line-height:24px;letter-spacing:1px;font-weight:bold;color:#ffffff;">{1}</h3>
<p style="margin:24px 0 8px;font-family:Arial,sans-serif;font-size:16px;line-height:22px;letter-spacing:.5px;color:#ffffff;">Thank you for your order!</p>
<p style="margin:8px 0 8px;font-family:Arial,sans-serif;font-size:16px;line-height:22px;letter-spacing:.5px;color:#ffffff;">Good news! It's on its way.</p>
<p style="margin:8px 0 8px;font-family:Arial,sans-serif;font-size:16px;line-height:22px;letter-spacing:.5px;color:#ffffff;">You can find the shipping details below.</p>
<h3 style="margin:16px 0;font-family:Arial,sans-serif;font-size:18px;line-height:24px;letter-spacing:1px;font-weight:bold;color:#ffffff;">
<a style="color:#ffffff;" href="https://www.ups.com/mobile/track?trackingNumber={2}">
[Track my package!]
</a>
</h3>
<p style="margin:32px 0 8px;font-family:Arial,sans-serif;font-size:16px;line-height:22px;letter-spacing:.5px;font-weight:bold;color:#ffffff;">Please contact Customer Service if you have any questions.</p>
<p style="margin:8px 0 8px;font-family:Arial,sans-serif;font-size:16px;line-height:22px;letter-spacing:.5px;color:#ffffff;">Customer Service:
<a style="color:#ffffff;" href="tel:18003665412">1-800-888-8888</a> ext. 8888
</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
inline.ContentId
, when it should actually beatt.ContentId
.inline
isn't required at all. I prefer your question to all the answers, as you really don't need to use anAlternateView
. – Kulda