Notification E-Mails - HTML design broken with Outlook and large logo pic

Help / Discuss
, ,
3

Update #2: (possible solution)

So i’ve been trying around with the Conditional Comments (<!--[if mso]> statement) and
was able to optimize the presentation of the uploaded XWiki Logo in MS Outlook 2016 (on Windows 10).

Here is the result of an notification E-Mail with my fix approach inside XWiki.Notifications.MailTemplate, it compares the the same message in Mozilla Thunderbird and Microsoft Outlook 2016 (both on Windows 10):

xwiki_notification_Outlook2016_HTML_fix
xwiki_notification_Outlook2016_HTML_fix1797×802 50 KB

  • So this should solve the problem if someone is using a large picture for his XWiki instance logo.

Here is the source code which i’ve used (probably it can be enchanced a litte bit):

XWiki.Notifications.MailTemplate - HTML - Fix for Outlook 2016 (large sized logo) 
#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
    <table width="100%" border="0"><tr height="55px">
    
    ## Outlook Fix #1 - Start
    <!--[if mso]>
      <center>
      <tr><td>
      <table border="0" cellpadding="0" cellspacing="0" width="600">
    <![endif]-->
    
      ## Logo
    
      ## Outlook Fix #2.1 - Start    
      <!--[if mso]>
        <table width="50%"><tr><td align="left"><a href="$xwiki.getURL($services.wiki.currentWikiDescriptor.mainPageReference)"><img width="100" height="50" src="cid:logo" alt="XWiki" style="text-align: right; width: 207px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
        <div style="display:none">
      <![endif]-->
      ## Outlook Fix #2.1 - End
      
      <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>
    
      ## Outlook Fix #2.2 - Start
      <!--[if mso]>
        </div>
      <![endif]-->
      ## Outlook Fix #2.2 - End

    ## 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
    
    
    <!--[if mso]>
      </td></tr>
      </table>
      </center>
    <![endif]-->
    ## Outlook Fix #1 - End
    
    
    </tr></table>

    ## Events div
    <div style="background:white;padding:1em; border-left: 1px solid #eaeaea;border-right: 1px solid #eaeaea;border-bottom: 1px solid #ddd;border-top: 1px solid #f0f0f0;">
      <h1 style="font-size:30px;font-style:normal;font-weight:500;line-height:42px;letter-spacing:normal; margin-top: 0;font-size:21px;">$escapetool.xml($services.localization.render('notifications.email.title'))</h1>
      ## Display a table of content
      #displayTOC($sortedEvents)
      ## Display Events
      #foreach ($list in $sortedEvents.values())
        #foreach ($sortedEvent in $list)
          #displaySortedEvent($sortedEvent)
        #end
      #end
    ## End of the events div
    </div>
  ## End of the main table
  </td></tr></table>
## End of the main div
</div>

Maybe this could be included into the official XWiki.Notifications.MailTemplate?

Hope this helps!

Best regards,
Dolo