CFMail: CFMAILPARAM Used to Embed Images in Email

Posted May 22, 2006 at 12:57 PM by Ben Nadel

Tags: ColdFusion

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

Post A Comment

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.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>
	Remember my information
	Subscribe to comments
	Send me a copy of this comment