Uploaded image for project: 'XWiki Platform'
  1. XWiki Platform
  2. XWIKI-16994

Improve HTML Code for Mail Notification Template to optimize logo embeding for Microsoft Outlook

    Details

    • Type: Improvement
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 11.0.2
    • Fix Version/s: None
    • Component/s: Mail
    • Labels:
      None
    • Environment:
    • 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>
      

      *+Result:
      +*

      Additional information:

        Attachments

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              Dolo Dolo
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated: