Embed PNG Encoded in System.Net.Mail HTML Message - html

Let's assume that I'm already sending email messages and all that is working OK. I'm trying to embed a Base64 img in the HTML for a system.net.mail message inline and it's not working. It shows everything and the source on the email has the image embedded but it's not showing.
<html>
<table>
<tr>
<td>Name:</td>
<td>Ralph Wiggums</td>
</tr>
<tr>
<td><img src="data:image/png;base64,iVBORw0KGg...deleted for size sake...ErkJggg=="></td>
</tr>
</table>
</html>

Related

how to prevent email clients add my images as attachments

I am creating an html email template that will hopefully show on mostly used desktop and web email clients (such as Outlook, Gmail or Yahoo).
I'm having a hard time on doing an html email template where my images are being considered as attachments. I'm assuming it's possible to not show them as attachments since most websites that I am subscribed of such as Pinterest, they have images on their html email templates, but it doesn't show them as attachments too.
Here's a code I am testing
<table align="center">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<img src="#web/mail/img/email-for-first-users-header.jpg" style="width:auto; height: auto; border-style: none; display: block;"/></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<h2>Hi, non-user's name!</h2>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
What I basically want to achieve is that, the email clients will not add my images on the attachments area.
Embedding an image in an email first requires that you have a version of said image as a base64 encoded string. Once your image is encoded, jump into your template, or whatever HTML you’re sending out, and embed it using a standard HTML image tag:
<img alt="My Image" src="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgACAESAAMAENkDZ5u8/61a+X...more encoding" />
Then you’re done! Send away.

Change plain text email into HTML email

This is in Magento 1.9.x.
I just edited the contents of a transaction email, added some HTML code into it, but the email is still rendering as plain text.
How do I make that email into a HTML email?
Here is how it looks in Magento:
The email contains HTML tags, but it's template type is Text.
I cannot find anywhere to either (a) change this template type to HTML OR (b) create a new HTML template.
This is the email content:
<body>
<img alt="Flamefast" src="http://www.flamefast-gas-safety.co.uk/skin/frontend/default/gas-safety/images/logo.png" />
<h1>Web Enquiry Form</h1>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>Name:</td><td>{{var data.name}}</td>
</tr>
<tr>
<td>Email:</td><td>{{var data.email}}</td>
</tr>
<tr>
<td>Telephone:</td><td>{{var data.telephone}}</td>
</tr>
<tr>
<td>Company:</td><td>{{var data.company}}</td>
</tr>
<tr>
<td>Interested in:</td><td>{{var data.interest}}</td>
</tr>
<tr>
<td>Quote Required:</td><td>{{var data.request_quote}}</td>
</tr>
<tr>
<td>Info Required:</td><td>{{var data.request_info}}</td>
</tr>
<tr>
<td>Call-back Required:</td><td>{{var data.request_callback}}</td>
</tr>
<tr>
<td>Message:</td><td>{{var data.comment}}</td>
</tr>
</table>
</body>
And this is what it looks like in my email client. None of the HTML is being rendered. My problem here is I cant find anything in Magento's Admin Panel that could create a HTML email or change this to a HTML email.
Can anyone help?
your template type is text beacuse you are using contact email as in your screen shot , it is by default in text format, you have to create an email template as below
1.click on add new template button .
2. Do not load contact email template.
3. Load any one else if you want otherwise.
4. write template name, subject and paste your html in content area and save
thanks!

How to embed a picture (jpg/png/etc,) into html and email it out with mail

Background: I am trying to my emails html based, as it is more versatile (I am new to html). I have been playing around with html for a few hours. I can so far embed tables, and different headings and links etc. into the emails that I send out, but have massive difficulty with embedding pictures.
I thought it might a client specific problem - but Hotmail, Outlook and G-mail all don't show the attached image. All I see is the the box with the alt (alternative) text.
#!/bin/bash
h_test=mytest.html
echo "This is a test email"> TESTEMAILTESTEMAILTESTEMAIL.txt
echo "<html>
<head>
<title>HTML E-mail</title>
</head>
<body>
<p><b>Note:</b> This is just a test email.</p>
<p>Trying to do different things all in one email.</p>
<h2>Table 1</h2>
<table style="width:25%">
<tr>
<td>New York</td>
<td>UNITED STATE OF AMERICA</td>
</tr>
<tr>
<td>Sydney</td>
<td>AUSTRALIA</td>
</tr>
<tr>
<td>Istanbul</td>
<td>TURKEY</td>
</tr>
</table>
<h2>Table 2</h2>
<table border="1"; style="width:50%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<h2>Image 1</h2>
<img src='https://www.google.com.au/search?q=image+test&espv=2&biw=1366&bih=663&source=lnms&tbm=isch&sa=X&ved=0CAYQ_AUoAWoVChMI1_fn1MrNyAIVITamCh32cQej#imgrc=driDe9TNSAxoAM%3A' alt='You should be seeing a picture'>
<h2>Link</h2>
<a href='http://www.google.com'>Click Here</a>
</body>
</html>" > $h_test
echo ">> Sending email..."
`mail -s "$(echo -e "This is Subject\nContent-Type: text/html")" my_email#me.com < mytest.html`
echo "...e-mail sent"
Research: I have looked at websites such as this site, but didn't work. I have also looked up similiar questions on stackexchange but couldn't make it work.
Q: How can I embed pictures into my emails?
You can embed images in the html it self,base64-encoded, like this:
<img src="data:image/png;base64,iVBORw0KGg....." />
Look for example at this site to generate the base64 endoding: http://dataurl.net/#dataurlmaker
Update:
I have now learned that this does not work in all email-clients:
Some examples:
iOS Mail Yes
Outlook 2003 Yes
Outlook 2007+ No
Apple Mail Yes
Yahoo! Mail No
Gmail No
Android default Yes
from this link https://www.campaignmonitor.com/blog/email-marketing/2013/02/embedded-images-in-html-email/
You are using the URL https://www.google.com.au/search?q=image+test&espv=2&biw=1366&bih=663&source=lnms&tbm=isch&sa=X&ved=0CAYQ_AUoAWoVChMI1_fn1MrNyAIVITamCh32cQej#imgrc=driDe9TNSAxoAM%3A which is the URL to an HTML document.
You need to use the URL to an image!
Note that most email clients will prompt users before displaying images on external URLs.
You can avoid this by attaching the image (i.e. sending a multipart MIME email) and then using the cid: URL scheme to point to the attachment.
Alternatively, you can convert the image to a data: URL scheme and embed it directly in the URL.

Outlook 2013 HTML Signature with Image Background

I have found another thread (Outlook 2013 background image broken) however I can't comment as I am a new user of Stack Overflow. Here's my code:
<table width="695" height="194" border="0" cellpadding="0" style="background-image:url('http://champ.website-admin.net/files/2014/12/email.jpg'); padding:24px;">
<tbody>
<tr>
<td><h3>Emma Woolward</h3></td>
</tr>
<tr>
<td><p>operations#champresources.com.au</p></td>
</tr>
<tr>
<td><p>1300 GO CHAMP</p></td>
</tr>
<tr>
<td><p>P: 1300 462 426</p></td>
</tr>
<tr>
<td><p>www.champresources.com.au</p></td>
</tr>
<tr>
<td><img src="http://champ.website-admin.net/files/2014/12/facebook.png" style="width:100px;height:33px; float: left;"><img src="http://champ.website-admin.net/files/2014/12/zeroharm.png" style="float:left; margin-left:5px;"></td>
</tr>
Background image is not appearing. The response to the similar thread suggests to use a multipart e-mail and they offered a code example:
--==boundary-1
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 7bit
Content-Base: http://test.endlesspeak.cz
<td background="cid:bg-deepak.jpg">
--==boundary-1
Content-type: image/jpg; name="bg-deepak.jpg"
Content-ID: <bg-deepak.jpg>
Content-Transfer-Encoding: base64
Content-Disposition: inline; filename="bg-deepak.gif"
I am wondering where this example code is best to go within the head?
Or does anybody else have any other thoughts on why the background image disappears when it goes into outlook?
Keep in mind that Outlook uses Word to render HTML, not IE. Don't know if Word supports background images for tables, AFAIK it does not support background images for the tag.

Browser is showing the text contents of a file instead of the rendered HTML contents of a file

I'm a rookie in webpage development working on my first webpage. I wrote some HTML code in a text editor and saved it as an HTML file. However, when I open it in my browser, I only see the plain HTML text instead of the table. Can anyone help me with this?
The following is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
<TABLE border=2>
<CAPTION>My Homework</CAPTION>
<TR>
<TD>Link to Homework #1</TD>
<TD>Link to Homework #2</TD>
<TR>
<TD>Link to Homework #3</TD>
<TD>Link to Homework #4</TD>
<TR>
<TD>Link to Homework #5</TD>
<TD>Link to Homework #6</TD>
<TR>
<TD>Link to Homework #7</TD>
<TD>Link to Homework #8</TD>
</TABLE>
</CENTER>
</BODY>
</HTML>
In addition to closing the <TR>'s with </TR>'s make sure you are saving the file with an extension that indicates it's an HTML file. page.html, page.htm etc.
So you are using TextEdit on Mac. Sounds like you might want to read this to ensure you are saving the file correctly.
What Andrew said is correct about proper HTML. But all browsers fix slightly broken HTML when they render the page.
From the sounds of the issue, i think you might have a file with 2 extensions e.g.: test.html.txt
Make sure in windows, you show known file type extensions and the file doesn't have a .txt (or any other extension besides .htm or .html) at the end of it.
The HTML editor you are using may be translating what you type in as HTML - that is, when you type <html> , it becomes something like: <html>
Try opening up the file is a simple text editor to see if this is happening.