Is it possible to have an image automatically embedded in an email, which when opened on a Blackberry will show by default without the user having to open it seperately?
I'm constructing a HTML email eshot that will be opened on Blackberry devices with the below HTML:
<html>
<style>
body {background-color: Black; color: #fff;}
</style>
<body>
<table align="center" cellpadding="4" cellspacing="4">
<tr>
<td><img src="cid:Eshot.jpg" /></td>
</tr>
</table>
</body>
</html>
This works when viewed Outlook but I'm not sure whether I can get it to render on Blackberry devices without it effectlvely being an attachment. I'm aware that Blackberry devices handle HTML emails in there own unique way, but the client it is being produced for has apparently had emails in the past where it has been embedded but I'm not sure what I can do if anything to force this.
I had a similar problem. You can find here how I solved it and try if it fits your needs. Shortly, you need to convert the image in a bytestream and include it in your html body as:
... <img src="data:image/bmp;base64,gzfddr56utggtlytlgg....jigkgfjytdjyr"></img> ...
where:
gzfddr56utggtlytlgg....jigkgfjytdjyr
is the encoded image bytestream.
Related
On my site I have images in the travel report, some of which you can click on and are therefore between the a tag of a link. This works well on the site. But if a PDF is made of it, the images with links will be placed behind the text.
We received the code, Robin immediately walked over to it and came back with the house key.<img src="/images/pngegg64.png" alt="Receipt” title="click to view the bill" border="0" align="left"> After dinner to the apartment.
On the website: example HTML/PHP - result in html (pic)
On PDF via dompdf: example PDF - result in pdf (pic)
Does anyone know how this can be solved so that the image also appears between the text and not after the text?
Maybe you can set a z-index value for your image's CSS like this:
img {
z-index: 1;
position: relative;
}
Or try putting the
<img src="/images/pngegg64.png" alt="Receipt” title="click to view the bill" border="0" align="left">
in a block-level element. Wrap a <div></div> around it.
Hope it helps!
I'm working on an email that has several dividers. The character in the table cell gets deleted when edited through the wysiwyg editor. I tried using the &zwj character to solve that issue and it works on most email clients but outlook 2016 is showing a line above the divider.
Screenshot
Is there a better solution than this?
<tr>
<td bgcolor="#222222" style="font-size: 1px; line-height:16px; color:#222222"></td>
</tr>
Outlook 2016 has a problem with adding those lines in. Other developers have reported that the issue is down to Outlook 2016 converting white space.
You could try targeting Outlook and collapsing the borders. Just add this:
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0; }
</style>
<![endif]-->
It’s worth noting that depending on how you structured your email this may not be the right fix for you. It works on some emails, but can have an adverse effect on the overall rendering of the design.
You can also try matching the background. It's more of a cover up than a fix. Lines inherit the color from the <body> tag. So, by setting the background color of the <body> to the same color as our problem section, we essentially cover up the lines. They’re still there, yes, but no one will see them. We also want to only target the problem clients. There’s no need to change the background color of clients that render the email correctly.
Simply add this to the <head> of your email with the background color changed to match the problem section.
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body { background-color:#123456 !important;}
</style>
<![endif]-->
More info about lines in Outlook here: https://www.emailonacid.com/blog/article/email-development/how-do-i-get-rid-of-the-lines-in-outlook-emails/
Have you tried using border instead of background to set the color?
<tr>
<td style="font-size: 1px; line-height:0; border-bottom: 1px solid #222222;"></td>
</tr>
If found that even when ESP's don't mess with and characters, Outlook can sometimes interpret height and line-height oddly. If if we're using mso-line-height-rule: exactly;.
I use border in my own work and haven't found an issue yet.
Cannot replicate this at all. Any chance of a view of your complete template code?
There could be a wider underlying issue with your HTML.
Alternatively, change your declaration to
That is the correct HTML version of a zero space character.
zwj also doesn't display correctly in Litmus when I test your snippet in one of my templates.
Think of a small (valid) html mail with an image. Litmus tests ran fine.
The images are downscaled to provide a sharp resolution on high DPI devices (a.k.a. Retina Images), i.e. the image is 500px wide but to be displayed at 250px.
When I send the mail with an embedded image instead of a remotely served image, I noticed a strange behavior in Apple Mail on macOS (tested on 10.12.6): The layout is broken.
Screenshot Remote:
Screenshot Embedded:
As you can clearly see, when embedded the image breaks out of the table. This only happens if the real image size is larger than the current preview pane size.
I simplified the example up to the point where I realized that this might be an Apple Bug. Does anybody know a Radar for this? Or a workaround?
I played with overflow etc but did not find a solution..
The bug does not occur when
the image is #1, so it's exactly the same size as displayed (but not sharp enough on high DPI then)
the preview pane is larger than the image file dimensions
It looks like Apple Mail uses the real dimension to fit it into the table when an image is embedded via cid or even base64. When served remotely it is downscaled first.
Update
Submitted as rdar://33564090, see https://openradar.appspot.com/radar?id=5011843189833728.
Source of test mail
<!DOCTYPE html>
<html>
<head>
<title>Apple Mail Retina Image Bug</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>
Retina Image in Signature Test
<br>
Best regards,
<br>
</p>
<!-- Footer with Retina Image -->
<table border="0" cellpadding="0" cellspacing="0" style="background: #eeeeee;">
<tr>
<td style="padding: 10px;">
<!--img alt="Logo" src="http://via.placeholder.com/500x50" width="250" height="25" border="0" style="width: 250px; height: 25px;"-->
<img alt="Logo" src="cid:logo" width="250" height="25" border="0" style="width: 250px; height: 25px;">
</td>
</tr>
</table>
</body>
</html>
I've seen this problem touched on in many questions but none have been specific enough to help me. So I hope it offends no one if I simplify it and ask again. Hope springs eternal!
Is it really IMPOSSIBLE to control the width of an image embeded in an email when Outlook renders it? I.e. control the width of an image for which the html code is
<img src="cid:seal">
I.e. when the html code expects an embedded image instead of one stored elsewhere.
[Note: "seal" is the content ID I assigned when creating the MimeBodyPart with the embedded image].
Details:
I use a Javamail application to send a multi-part email message. The body part is an html document. Another MimeBodyPart carries the image used in the html doc. I've simplified the html test to nothing more than a two column table with the left column for the image and the right column for text.
And absolutely NOTHING I have tried has been able to control the size of the image when opened in OUTLOOK.
The image is always what I assume must be some native size for the image ... which is too big ... so it forces the first cell to be more than 15% wide. Or if I give the cell a fixed width the image overflows the box, i.e. get's clipped.
I put the basic code stripped of all font styling colors etc. below.
I have tried every combination of using width attributes and css style properties on the img tag. I've wrapped the image in another table ... or wrapped it in a div block inside the main table cell ... and even wrapped it in a div block inside a table cell inside the parent table cell. And I've tried specifying widths in fixed pixels and %'s.
It would really be nice if we all knew for sure if this is simply IMPOSSIBLE with Outlook.
Or if it is possible possible, to publish sample code that works. [It's hugely attractive to have the email open its images immediately, and not rely on the reader downloading them.]
NOTE: I seem able to control width when I load the image from an outside source afterwards, i.e.
Thanks for any help.
<html>
<head>
<meta name="viewport" content="width=980, initial-scale=1">
<title>Test Email</title>
</head>
<body style="width:100%; border:0;margin:0;padding:0;">
<table align="center"
style="width:980px; border-collapse:collapse;
margin-left:auto; margin-right:auto;">
<tr style="border:0; margin:0; padding:0;">
<td style="width:15%; border:0; margin:0; padding:0;">
<img src="cid:seal"
style="width:6em; height:auto;">
</td>
<td style="width:85%; margin:0; padding:.5em 0em 0em 0em; border:0;">
Some Titles and stuff
</td>
</tr>
<tr>
<td colspan="2" style="border:0; margin:0; padding:1em 1em 0em .5em;">
<p> 1st paragraph
....
<p> last paragraph
</td>
</tr>
</table>
With help from Eugene above, I discovered at least one good solution.
<img src="cid:seal" width="300" or "300px" of "15%"> DOES NOT WORK.
But when I ditched the quotes this worked
<img src="cid:seal" width=300 height=300>
It does of course mean setting width in % is still a problem since it requires quotes.
But I'll take what I can get. Email now pops open with logo without the user needing to download pictures. AND ... this css body selector also works rendering the background with an embedded image. [I stored the background image with a Content ID of"bkg".]
AGAIN ... unlike the img attribute src="cid:id" that uses quotes, url() requires the id w/o quotes.
<body style="background-image:url(cid:bkg);
background-repeat:repeat;
width:100%;
generic-family:Sans-serif;
font-family:Verdana;
border:0;margin:1em 0 1em 0;padding:0;">
Outlook uses Word as an email editor. The following series of articles provides reference documentation related to supported and unsupported HTML elements, attributes, and cascading style sheets properties:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
You can design the page in Word and then save the resulted document as a web page. Thus, you will find the required HTML markup to use.
I'm working in a responsive newsletter and I'm nearly finished. In the last two weeks I read about the issues and things to mess when coding a responsive newsletter.
My newsletter is ready to use and responsive but now I face some problem that I cant solve since two days.
I got an image that is responsive in Outlook:
<img src="#" style="width:230px;max-width:96%;border:0px;" width="230">
and a table that is also responsive in Outlook:
<table width="800" style="width:800px;max-width:96%;text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
<tr>
<td style="text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
MASS-TEXT
</td>
</tr>
</table>
so far so good - it works great. BUT if I put the image in the table it isn't responsive anymore:
<table width="800" style="width:800px;max-width:96%;text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
<tr>
<td style="text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
<img src="#" style="width:230px;max-width:96%;border:0px;" width="230">
</td>
</tr>
Anybody know a solution for this or know why it isn't working because it works as single elements?
I tried a few things like give the rows and columns a percentage width and so on... nothing working. I just want a responsive table with a responsive image inside working for outlook... someone experience with this?
Dont you think that the max-width should be static and width should be relative i.e. max-width:800px and width:96%;
The below code works well in the standard outlook version. Outlook responsive Image in table working.
<table width="600" >
<tr><td>
<img src="add image link"/>
</tr></td>
</table>