Hi there,
i’ve detected some weird behavior regarding the XWiki notification E-Mails when
using MS Outlook 2016 and a large sized logo.
-> Logo is displayed in full size.
Problem:
-
i am using a large picture (app. 5000 x 2000px) as Logo for the XWiki
-
The logo is included in the notification E-Mail
-
When the notification is opened/received in Microsoft Outlook 2016 it tries to show the logo picture in original size - which leads to a broken HMTL like here:
-
The same notification message looks good in other mail clients:
-> Tested in Thunderbird, Apple Mail, Outlook 2016 for Mac, Zimbra Webclient
My guess:
I think it is clear that the root of the problem is MS Outlook on Windows. I assume that on macOS Outlook and Apple Mail use WebKit as a rendering engine, but on Windows Outlook is using Word as rendering engine. (Source)
I searched and found an similar problem for “Outlook Image Issues in HTML…”. On this site they mentioned an possible solution using Conditional Comments for Outlook.
Example:
<!--[if mso]>
<center>
<tr><td>
<table border="0" cellpadding="0" cellspacing="0" width="600">
<![endif]-->
-> Where “if mso” means “if using Microsoft Office”
What i’ve tried to solve the problem
So i decided to test out the “if mso” solution with the XWiki.Notifications.MailTemplate.
`xwiki/bin/edit/XWiki/Notifications/MailTemplate?editor=object`
-
I’ve inserted the “<!–[if mso]>” instruction at 2 positions in the Template:
/bin/edit/XWiki/Notifications/MailTemplate?editor=object
#template('notification/email/macros.vm') ## Main Div <div style="font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; background-color:#F5F5F5; padding:15px; margin:0 auto; color: #1d1f24; "> ## Main centered table <table style="max-width: 570px; margin:0 auto" cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td> ## Logo table <!--[if mso]> <center> <tr><td> <table border="0" cellpadding="0" cellspacing="0" width="600"> <![endif]--> <table width="100%" border="0"><tr height="55px"> ## Logo <!--[if mso]> <table width="50%"><tr><td align="left"><a href="$xwiki.getURL($services.wiki.currentWikiDescriptor.mainPageReference)"><img src="cid:logo" alt="XWiki" style="max-width: 50%; max-height: 50px;"/></a></td></tr></table> <div style="display:none"> <![endif]--> <td align="left"><a href="$xwiki.getURL($services.wiki.currentWikiDescriptor.mainPageReference)"><img src="cid:logo" alt="XWiki" style="max-width: 50%; max-height: 50px;"/></a></td> ## Notification settings <td align="right"><a href="$xwiki.getURL($emailUser, 'view', 'category=notifications')" style="color: #0088CC; text-decoration: none; font-size: 14px;"><img src="cid:NECog.png" alt="" height="12" style="height: 12px"/> $escapetool.xml($services.localization.render('notifications.settings.title'))</a></td> ## End of the logo table </tr></table> -
Unfortunately this hasn’t solved the problem in MS Outlook 2016 on Windows
-> But is also has not broken anything (independent of the mail client) -
I’ve also tried to search for a solution directly in MS Outlook 2016
-> But activating “Read all standard mail in plain text” (File > Options > Trust Center Settings > Email Security) just screw up the design of the XMail notification E-Mail
Probably i missed something and the solution (using the “if mso” statement) is simple?
Dose anyone maybe has a hint?
Thanks in adavance!
Best regards & nice weekend!
Dolo
