CFMail: CFMAILPARAM Used to Embed Images in Email
It used to be in pre-ColdFusion MX 7 (CFMX 7), to embed images in an email, to set them up so that they do not show up as attachments or external source links, I needed to use a special CFMail custom tag. Just the other day, on the House of Fusion mailing list, there was a thread about embedding images in emails.
I did not know this, but apparently in ColdFusion MX 7, the CFMailParam tag can be used to embed images directly into the email content. After some initial testing, it seems this is completely true and very exciting! It is almost too easy.
I tried it with two different methodologies. One, embeds a file from the local file system. The other embeds an image from a live Url. Both seemed to work find with Microsoft Outlook and GMail. The live Url link did not work in Hotmail, but was available as a downloadable attachment. While I could not test it, I was told that the test for live Url embedding did not work in Thunderbird.
Here is the sample code:
<cfmail
to="xxxx@xxxx.com"
from="xxxx@xxxx.com"
subject="Embedded Image test via CFMail"
type="html">
<h2>
This Email is Designed to Test Embedded Email Messages
</h2>
<p>
Image of a puppy I found
</p>
<p>
<img src="cid:puppy" width="350" height="263" alt="" /><br />
</p>
<p>
Image of two puppies I found
</p>
<p>
<img src="cid:puppies" width="350" height="261" alt="" /><br />
</p>
<!--- Embed image via the local file system. --->
<cfmailparam
file="#ExpandPath('./puppy.jpg')#"
contentid="puppy"
disposition="inline"
/>
<!--- Embed the image via a live Url link. --->
<cfmailparam
file="http://some-made-up-domain.com/1119eaf0.jpg?v=0"
contentid="puppies"
disposition="inline"
/>
</cfmail>
Want to use code from this post? Check out the license.
Reader Comments
Fantastic tip. If was the first one I found when googling. I am building a crm system and need to send graphics.
Here is what I have added to it.
1. I loop through the email content looking for src ( I know there won't be anything else in there with src but <img> as it's my content.
2. Add each image URL to a list
3. Loop through the list and replace the url in the mailer content with the cid: +filename (without extension)
4. Then at the bottom of the email loop through the list again and do the <cfmailparam> inside the loop.
Worked first time. Thank you!!!
@Simon,
Sounds like a cool idea. I like it a lot. I recently got into CFPop for pulling down emails and I've been told you have to do the opposite on render of the email body (taking all the CIDs and swapping them back into img SRC attributes to point to files on the server or something). Nothing to do with what you are saying, but at the other end of the same spectrum.
Could this be adapted to embed css into the email as well? So far I've had no luck.
@John,
I don't think so. When you use CSS in a web page, you are not referring to the file itself, but rather to formatting rules that are loaded in the file. I don't think this loads files, but rather provides inline references to them.
Yeah. I settled on including the css in a style tag in the header. I was experimenting with styling emails that will be viewed in Lotus Notes.
They'll get just the plain markup while the rest will be able to view the styled email.
I did discover that Lotus Notes will not display .png files. A simple conversion to .gif and presto!
I attempted to use this tag to embed an image, it only sends as an attachment and I am using CF7 .. Strange.
<cffunction name="send" access="public" returntype="void" output="false">
<cfargument name="emailNotobj" required="true" type="bmg.model.beans.emailnotification" />
<cfset var r = variables.reactor.createRecord("distroList").load(distroId=arguments.emailNotObj.getdList()) />
<cfset var eList = "" />
<cfset var emails = r.getDistroEmailIterator().getQuery() />
<cfset var b = getPreview(arguments.emailNotObj) />
<cfloop query="emails">
<cfset eList = eList & emails.email & ',' />
</cfloop>
<cfmail to="#eList#" from="BMGBase@awsmail.att.com" type="html" subject="#arguments.emailNotObj.getSubject()#">
<div>
<cfmailparam file="#ExpandPath('views/images/mailheader.jpg')#" contentid="emailHeader" disposition="inline" />
</div>
#b#
</cfmail>
</cffunction>
@Thomas,
To embed it, I am pretty sure you need to give it a contentid value and then reference via an IMG tag within the email where the src is "cid:YOUR_VALUE".
two seconds after i post my question i realize there is an image tag with cid:idname in it. I guess I assumed the param tag was going to just fit it in automagically for me. :(
@Thomas,
No problem :)
Hi all,
Just writing to confirm that the embedded images work in Thunderbird.
The first time I ran Bens example, it didnt work but after looking at the source in Thunderbird, I figured out why it wasnt showing.
The image Ben uses in his example is :
http://static.flickr.com/42/111929124_66e7ca6af0.jpg?v=0
The ?v=0 at the end was causing problems in Thunderbird.
To make it work, I changed the image URL to:
http://static.flickr.com/42/111929124_66e7ca6af0.jpg
and BINGO! Works a charm!
Regards,
Dan.
I'm trying to get what Simon did. I have two files index.cfm which I use to see that the page looks like in my browser (and I edit) and when I'm ready to send I call cfmail.cfm which I use a CFINCLUDE to my index.cfm file.
Is there any code on how to do the what Simon did?
I'm using CFHTTP for the first time.
1. I loop through the email content looking for src ( I know there won't be anything else in there with src but <img> as it's my content.
2. Add each image URL to a list
3. Loop through the list and replace the url in the mailer content with the cid: +filename (without extension)
4. Then at the bottom of the email loop through the list again and do the <cfmailparam> inside the loop.
Thanks
What about tracking images? Currently I am using a img tag to call a cfm age to track whether the email was opened or not. This doesn't work with this method as far as I've tested. Is there a way to do this without making the user 'Download images'?
@IK,
Not as far as I know. You either use the CFM to track AND have to get them to explicitly download the image... or you have the image always display, but you lose the ability to track.
Thanks for this - I have been trying to find a solution to this for years! So simple! one question tho... any idea if I could get it to embed a pdf in the body of the email?
@Dave,
You might could try an IFrame to embed the PDF, but not sure that would work.
here again for a solution - and of course i found it - thx ben.
Thanks Ben - searched for and tried everything I could think of without success. If ever you hear of / create a solution, I would be keen to hear from you!
@James,
Woohoo, glad to help :)
@Dave,
I am not sure what you are referring to. A solution for what?
Yet another tip, from the most useful collection of tutorials on the net.. thanks Ben!
I have a weird problem where the image is embeded inline like it should, but it's also showing the image at the bottom of the email message. i.e. the same image is being displayed twice. Not sure if this my email program (Mac OS X Mail.app) or if I'm doing something wrong.
Has anyone else experienced this issue?
@Doug,
I have gotten that a few times. The thing at the bottom is usually the email client's way to represent attached images. So, it shows up inline, but then it also shows up as an image attachment.
is there any way we can receive an email receipt using cfmail?
@Enad,
Not that I know of. I know MS Office Outlook has some type of functionality about that; but, that is custom to the Outlook client, as far as I know.
The example is too good. But, It works only on <img tags. What if I wish to use the same in <td height="56" background="cid:header_bg2">
not even in - <td style="background-image:url(cid:alertImg); background-position:center; background-repeat:no-repeat;">
When I try to insert the cid as background image, I get the images as file attachments in my outlook rather than inline images.
@Tejashri,
I am not sure that I ever tried to use it as a background image. It might not be possible. Also, I think sometimes the images do appear as attachments EVEN if they are used inline as well.
Is it possible that Outlook blocks background images by default? I know some email clients have their own personality in what they show by default (such as background colors / images).
Hi,
I have some dynamic text over the image, using div tag styles, placed text over the image. But when sent this page useing cfmail and cfsavecontent tags, in gmail text displaying after the image.
@Hari,
Every email client is unique in which CSS properties it actually supports. Sounds like this simply isn't supported.
Take a look at Email Standards - it's a completely depressing web site on how different each email client actually is :)
http://www.email-standards.org/clients/gmail/
Ben - came across your site - want to say thanks - I was able to send e-mails before but didn't know how to embed images into it. I'm using CF in conjunction with a Flex app which does all of the heavy lifting in terms of customizing and assigning values to variables then basically passes the parameters to be placed inside the e-mail via a Httpservice. Now the e-mail looks much more professional with the ability to include logos and other images.
Thanks!
@Bill,
Glad to help out. I agree that branded emails just looks much more professional.
Interesting, I've been using this technique for a couple years without a problem. Today we started to test out a different SMTP solution (Postmark.com) and now all of a sudden my inline images are coming as attachments, not inline like they were using Microsoft SMTP. Anyone have any ideas (I'm 99% sure Postmark is going to say it's in the code, but I know it works fine using other SMTP servers).