Menu
I have created one html template for email. (using PHP and PHPMailer to send the mail)
It's working fine in below sizes.
But it's not working in Samsung Galaxy Note 5.
In other android devices looks like below image,
In Samsung Galaxy Note 5 looks like below,
Images displayed like attached items in Samsung Galaxy Note 5.
Html Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Simple Responsive HTML Email</title>
<style type="text/css">
.content {max-width: 900px !important;}
.dynamic_container{width: 31.33% !important;border:1px solid #ccc;margin:1%;}
a{padding: 10px 8px !important;}
@media (min-width:651px) and (max-width: 992px){
.content {max-width: 600px !important;}
.dynamic_container{width: 47% !important;margin:1.5%;}
a{padding: 10px 0 !important;}
}
@media (min-width:0px) and (max-width: 650px){
.content {max-width: 300px !important;}
.dynamic_container{width: 96% !important;border:1px solid #ccc;margin:2%;}
}
</style>
</head>
<body bgcolor="#f6f8f1" style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; min-width: 100% !important;">
<!--[if (gte mso 9)|(IE)]>
<style>
.dynamic_container{width: 32.6% !important;border:1px solid #ccc;}
.button{padding:10px !important;}
</style>
<table width="100%" align="center" border="0">
<tr>
<td>
<![endif]-->
<table class="content" align="center" width="100%">
<tr>
<td class="header" bgcolor="#c7d8a7" style="padding: 40px 30px 20px 30px;">
<table width="100" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="70" style="padding: 0px 20px 20px 0px;">
<img src="assets/images/i4cfinancial_Logo.png" border="0" alt="" style="height: auto;" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="innerpadding borderbottom" style="border-bottom: 1px solid #f2eeed;">
<table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
</tr>
<tr class="grid">
<td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
</tr>
<tr class="grid">
<td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
</td>
</tr>
<tr>
<td style="padding: 20px 0px 0px 0px;">
<table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
</td>
</tr>
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
</tr>
<tr class="grid">
<td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
</tr>
<tr class="grid">
<td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
</td>
</tr>
<tr>
<td style="padding: 20px 0px 0px 0px;">
<table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
</td>
</tr>
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
</tr>
<tr class="grid">
<td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
</tr>
<tr class="grid">
<td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
</td>
</tr>
<tr>
<td style="padding: 20px 0px 0px 0px;">
<table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
</td>
</tr>
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
</tr>
<tr class="grid">
<td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
</tr>
<tr class="grid">
<td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
</td>
</tr>
<tr>
<td style="padding: 20px 0px 0px 0px;">
<table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
</td>
</tr>
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
</tr>
<tr class="grid">
<td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
</tr>
<tr class="grid">
<td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
</td>
</tr>
<tr>
<td style="padding: 20px 0px 0px 0px;">
<table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
</td>
</tr>
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
</tr>
<tr class="grid">
<td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
</td>
</tr>
<tr class="grid_header" style="color: #153643; font-family: sans-serif;">
<td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
</tr>
<tr class="grid">
<td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
<img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
</td>
</tr>
<tr>
<td style="padding: 20px 0px 0px 0px;">
<table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
</td>
</tr>
<tr>
<td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
<a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer" bgcolor="#44525f" style="padding: 20px 30px 15px 30px;">
<table width="100%" border="0">
<tr>
<td align="center" class="footercopy" style="font-family: sans-serif; font-size: 14px; color: #ffffff;">© Someone, somewhere 2013<br/><a href="#" class="unsubscribe" style="display: block; margin-top: 20px; padding: 10px 50px; border-radius: 5px; text-decoration: none; font-weight: bold;"><font color="#ffffff">Unsubscribe</font></a>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0 0 0;">
<table border="0" width="100%">
<tr>
<td width="50%" align="right" style="padding: 0 10px 0 10px;">
<a href="http://www.facebook.com/">
<img src="assets/images/fb.png" width="37" height="37" alt="Facebook" border="0" />
</a>
</td>
<td width="50%" align="left" style="padding: 0 10px 0 10px;">
<a href="http://www.twitter.com/">
<img src="assets/images/twit.png" width="37" height="37" alt="Twitter" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>Can you please help me (Explain as well) ?
690
Always show imagesOn your computer, go to Gmail. See all settings. Scroll down to the "Images" section. Click Always display external images.
In some cases, senders may be able to know whether an individual has opened a message with unique image links. As always, Gmail scans every message for suspicious content and if Gmail considers a sender or message potentially suspicious, images won't be displayed and you'll be asked whether you want to see the images.
Always show images If images don't load in Gmail, check your settings. On your Android phone or tablet, open the Gmail app . your account. Under "Data usage," tap Images.
In Gmail, select the "Templates" menu at the top of your inbox, find and click the Template you'd like to update, and then click the "Edit" button at the bottom of the window. Make necessary changes and hit "Save Template." To delete a no longer needed Template, click "More," and then "Delete Template."
The images in an email template might not display for a variety of reasons. The first thing to check is that the email client is enabled to display images. you might refer to your email client below to adjust your settings:
iPhone/iPod/iPad
Gmail
If the settings in your email client are correct and you still can't view images:
Try opening your email in another web browser or unblock images in the browser.
Sometimes the image is just too large or in a format that the email client doesn't support; the most common formats are JPG, PNG and GIF.
Make sure the images are hosted on a public web server. If you need a password to access the image, they won't display in an email.
In addition to it would be better to have a look at the articles below in order to prevent images from showing in an email template:
Set Up Images for Success in an Email
Missing Images in an Email Campaign
Hope this helps...
127
What about converting the images to base64?
You'll result with a slightly increased email size but you'll be able to show the images without showing them as attached ones.
Small guide on how to use base64 in emails: https://stackoverflow.com/a/9110167/9295292
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
