Question
Cognizant
US
Last activity: 14 Aug 2020 14:26 EDT
Image in email body not coming/rendering in outlook
Hi All,
I have a requirement to show case information on top of an image in Outlook email. I was able to glossify all the information that is needed in case and able to see in outlook email, except image in background.
I tried all sort of possible options such as,
1. image src. With this image comes but as standalone, beneath tah case information comes
2. Added image in background/background-image (url) attribute in CSS class and tried using in div, but failed to get image in outlook email,
3. Tried adding image in Pega section HTML section, failed
In all the above options - email attachment in case renders image in email body background. Since its browser so it may be working.
But ideally in outlook email image should come in background and on top of it all case information should be seen.
Please share some insights on this issue, find below a sample HTML code which i am using.
HTML Code:
<html> <head> <style> .container { position: relative; text-align: center; color: red; background-image:url('img_nature_wide.jpg'); } </style> </head> <body>
<h2>Image Text</h2> <p>How to place text over an image:</p>
<div class="container">Sample Label <h2>Case Information</h2>
Hi All,
I have a requirement to show case information on top of an image in Outlook email. I was able to glossify all the information that is needed in case and able to see in outlook email, except image in background.
I tried all sort of possible options such as,
1. image src. With this image comes but as standalone, beneath tah case information comes
2. Added image in background/background-image (url) attribute in CSS class and tried using in div, but failed to get image in outlook email,
3. Tried adding image in Pega section HTML section, failed
In all the above options - email attachment in case renders image in email body background. Since its browser so it may be working.
But ideally in outlook email image should come in background and on top of it all case information should be seen.
Please share some insights on this issue, find below a sample HTML code which i am using.
HTML Code:
<html> <head> <style> .container { position: relative; text-align: center; color: red; background-image:url('img_nature_wide.jpg'); } </style> </head> <body>
<h2>Image Text</h2> <p>How to place text over an image:</p>
<div class="container">Sample Label <h2>Case Information</h2>
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </div> </body> </html>
Thanks,
Raj
***Edited by Moderator: Pallavi to move from Pega Academy to Product***
Capgemini Norge
NO
HI Rajesh,
I am sharing here some of the best practices for HTML email. Missing one of these might have caused the issue.
HI Rajesh,
I am sharing here some of the best practices for HTML email. Missing one of these might have caused the issue.
- Make sure the Image is sourced from HTTPS site. (Eg : https://1.bp.blogspot.com/-2S-qYg_y5bQ/XzDYuWFag3I/AAAAAAABiT8/2-A3U6mtyxYxT8E2-S5LYR2_QuSWgTFNACLcBGAsYHQ/s640/nature-desktop-background-1691.jpg)
- It is highly recommended to inline CSS used in the HTML. You can use online tools for this. Here is the example after transforming to inline :
<html> <head> <title>Case Info</title> </head> <body>
<h2>Image Text</h2> <p>How to place text over an image:</p>
<div class="container" style="position: relative; text-align: center; color: red; background-image:url('https://1.bp.blogspot.com/-2S-qYg_y5bQ/XzDYuWFag3I/AAAAAAABiT8/2-A3U6mtyxYxT8E2-S5LYR2_QuSWgTFNACLcBGAsYHQ/s640/nature-desktop-background-1691.jpg');">Sample Label <h2>Case Information</h2>
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </div> </body> </html>
3. Use universal supported HTML tags and CSS. Some providers don't support "div" tags. For that, replace div with alternate supportive tags. Example :
<html> <head><title>Case Info</title> </head> <body>
<h2>Image Text</h2> <p>How to place text over an image:</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" background="https://1.bp.blogspot.com/-2S-qYg_y5bQ/XzDYuWFag3I/AAAAAAABiT8/2-A3U6mtyxYxT8E2-S5LYR2_QuSWgTFNACLcBGAsYHQ/s640/nature-desktop-background-1691.jpg" style="background-repeat:no-repeat; background-size:cover;">
Sample Label <h2>Case Information</h2>
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table>
</td></tr></table> </body> </html>
I hope it helps you ! Good Luck !
Capgemini Norge
NO
Can you try the second snippet with tr td instead of div? and also make sure the image URL is valid.
It worked for me when testing on the outlook web client.
Cognizant
US
Hi,
I used second snippet, gave same image url, but didt work. in browser its ok, but in MS Outlook image isnt coming.
Below Snippet is used in Corr Mail.
<table border="1" cellpadding="0" cellspacing="0" class="mcnCaptionBlock" height="100%" width="100%"> <tbody> <tr> <td background="https://1.bp.blogspot.com/-2S-qYg_y5bQ/XzDYuWFag3I/AAAAAAABiT8/2-A3U6mtyxYxT8E2-S5LYR2_QuSWgTFNACLcBGAsYHQ/s640/nature-desktop-background-1691.jpg" class="mcnCaptionBlockInner" style="background-repeat:no-repeat; background-size:cover;" valign="top"> Helo<br /> <br /> <br /> <br /> <br /> </td> </tr> </tbody> </table> Thanks,
Rajesh
Cognizant
US
Hi,
I need the image to come up in Outlook desktop application, like you said it will work in Outlook web email, please share any other pointers,
Thanks
Updated: 14 Aug 2020 14:26 EDT
Areteans Tech
AU
Hi Rajesh ,
when we tried to upload the image as binary file and refered it in HTML . we had a similar issue
Forward same mail to gmail and check if image is displayed there . ( an extra red warning will be displayed with mail) Then this might be the because the image is not from trusted source.
We tried with image content . It worked for us.
Go to Records->Technical->Image Content. Create the image content - Upload the image there , Now the image gets saved in a path in server. Let us know if it worked. Note: don't forget to deploy the image content rule in next environment
HTML : <img height="70" src="../datacontent/Image/rteImages/myLogo.png" width="300" />