Loading...

Details

Type: Improvement
Resolution: Unresolved
Priority: Minor
Fix Version/s: None
Affects Version/s: 11.0.2
Component/s: Notifications
Labels:
None
Environment:

Hide
OS: Ubuntu 18.04.3 LTS
XWiki: Version 11.10.2, installed as Debian (.deb) Package
DB: PostgreSQL 10.10 (from XWiki .deb)
AppServer: Tomcat9 (from XWiki .deb)
Java: openJDK8 (8u232-b09) - installed as dependency from XWiki .deb package

Show
OS: Ubuntu 18.04.3 LTS XWiki: Version 11.10.2, installed as Debian (.deb) Package DB: PostgreSQL 10.10 (from XWiki .deb) AppServer: Tomcat9 (from XWiki .deb) Java: openJDK8 (8u232-b09) - installed as dependency from XWiki .deb package

Difficulty:
Easy
Similar issues:

Description

Short description:

Using a large sized XWiki logo (e. g. 5000 x 4000 px), the HTML code for XWiki.Notifications.MailTemplate will embade the image in original size, when Notification E-Mail is viewed inside Microsoft Outlook (2016) on Windows 10 device.

Problem:

Set/activate E-Mail notification in XWiki
Made a change at any page inside XWiki
Open the from XWiki received notification E-Mail in Microsoft Outlook on Windows
Outlook rendering engine tries to use the full sized (5000 x 4000 px) logo
Outlook on Windows seems to ignore the *"max-width:"-*statement in the HTML code

Other mail clients (Thunderbird, Outlook on Mac, Apple Mail, Zimbra Webmail) are not affected.

Solution:

Option 1: You can use smaller logo in wiki, but this don't solve the root of the problem
Option 2: Using Conditional Comments inside the HTML Code of the XWiki.Notifications.MailTemplate
- Using <!--[if mso]> statement will help to solve this problem
- We can add additional condition (table) which will only be used when Microsoft Office programm (Outlook) is recognized as the viewing programm of the notification E-Mail
- following adjusted HTML code could be used:

#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>