Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at the jQuery Conference 2010 (Boston, MA) with:

CFMail: CFMAILPARAM Used to Embed Images in Email

Posted by Ben Nadel
Tags: ColdFusion

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 girl I found on Flickr.com.
  • </p>
  •  
  • <p>
  • <img src="cid:girl" width="350" height="263" alt="" /><br />
  • </p>
  •  
  • <p>
  • Image of two girls I found on Flickr.com.
  • </p>
  •  
  • <p>
  • <img src="cid:girls" width="350" height="261" alt="" /><br />
  • </p>
  •  
  • <!--- Embed image via the local file system. --->
  • <cfmailparam
  • file="#ExpandPath('./girl.jpg')#"
  • contentid="girl"
  • disposition="inline"
  • />
  •  
  • <!--- Embed the image via a live Url link. --->
  • <cfmailparam
  • file="http://static.flickr.com/42/111929124_66e7ca6af0.jpg?v=0"
  • contentid="girls"
  • disposition="inline"
  • />
  •  
  • </cfmail>



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!!!

Reply to this Comment

@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.

Reply to this Comment

@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.

Reply to this Comment

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!

Reply to this Comment

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>

Reply to this Comment

@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".

Reply to this Comment

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. :(

Reply to this Comment

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.

Reply to this Comment

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

Reply to this Comment

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'?

Reply to this Comment

@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.

Reply to this Comment

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?

Reply to this Comment

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!

Reply to this Comment

@James,

Woohoo, glad to help :)

@Dave,

I am not sure what you are referring to. A solution for what?

Reply to this Comment

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?

Reply to this Comment

@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.

Reply to this Comment

@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.

Reply to this Comment

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.

Reply to this Comment

@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).

Reply to this Comment

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.

Reply to this Comment

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!

Reply to this Comment

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).

Reply to this Comment

Post A Comment

?
You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.