Inserting Images Into HTML Email
Images can be displayed within HTML email without physically
inserting them.
This keeps email size down because the images do not travel
with the email. Thus, there is less chance of getting trapped
in email filters when filtering rules consider the size of
the email.
Images are downloaded only when the email is opened for
reading or, sometimes, when the email is in the preview pane.
The idea is simple. The way to make an HTML email like that
is the way a web page is made.
The software that sends the email must, of course, be able to
send HTML email. And there are a few other considerations:
-
All image tag src attributes must have absolute
http://... URLs as their values.
-
Some email reading software can not render HTML
email, some only understand basic HTML tags, and
others interpret certain HTML tags differently than
a browser would. Very few email reading software
renders HTML email as well as a browser would a
similar web page.
Keep the HTML as simple as possible for the visual
representation you are striving for.
In a moment, I will show you how to automatically insert the
tags of newly uploaded images into outgoing email. But first,
let's see several methods of manually create an HTML email
with an image visually embedded.
Let's use this image, caption, and paragraphs as our example:
The above uses only P, IMG, and BR tags. It's the most simple
HTML one can use to insert an image with caption.
Next, let's see how one would center the image and caption on
the page. Let's also reduce the size of the caption text.
The above should work with most email readers that understand
HTML. The DIV tag centers the image and the caption (the
centering stops where the cancel </DIV> tag is at),
and the style attribute in the SPAN tag (with a corresponding
cancel </SPAN> tag) specifies a smaller font size.
Notice that an inline style was used to make the caption text
smaller instead of a FONT tag. That's because FONT is
deprecated and, unlike browsers that started life recognizing
FONT, email readers don't need to be backward compatible.
Now, let's get more complicated and float the image and
caption to the left side of the window and have the paragraph
after the picture printed to the right of the image. If the
paragraph after the picture were large enough, it would wrap
under the picture after the space on the right is used up.
It is a bit much to expect all email readers to know how to
float something to the left. But some will do it just fine.
Those that don't understand "float:left" will most likely
begin the following paragraph below the picture, which may
be an acceptable degradation.
Now that you know several ways to display an image within an
HTML email, I'll show you how to automatically insert the
tags of newly uploaded images.
The software to do the job is Master Form V4.
I'll use the most complicated method above as the base for
the following examples. You'll be able to change the template
as desired.
The upload form will have 4 fields to be filled in:
-
Location of file to upload.
(assuming field name="iupload")
-
The image width (optional, see note).
(assuming field name="iwidth")
-
The image height (optional, see note).
(assuming field name="iheight")
-
The caption to be printed with the image.
(assuming field name="icaption")
Note: If the image width and/or height is not specified
in the form, remove those two attributes from the email
template's IMG tag so no height or width is specified. (The
email template is presented further below.) Specifying an
empty or non-number value for height or width might, with
some email readers, translate into the number zero. A height
or width of zero would make the image invisible.
The form will also have 3 hidden fields:
-
Where to find the file with instructions where to
store the uploaded image.
(name="uploadedfilesaveinfo")
-
Where to find the email template.
(name="emailtemplate")
-
Where the browser goes after the upload is complete.
(name="redirect" or name="flowto")
The image must be stored in a publicly accessible directory.
Publicly accessible means browsers can read files in it
without providing a password. Let's assume the file with
instructions where to store the uploaded image is:
The above says the form field name="iupload" specifies the
uploaded file name and to store the uploaded file in the
"/path/to/document/root/images" directory. That would be the
complete directory path of the document root plus the name
of the subdirectory to store the images at, "images" in this
case.
(The document root directory is the directory where browsers
find your default home page. If you don't know the path to
your document root, Master Pre-Installation Tester can help, or you can ask
your hosting company.)
When the image directory is a subdirectory of the document
root named "images," the URL to the image directory will be
"http://example.com/images" (substitute domain name
for your own).
Now, knowing the form field names, where the image will be
stored, and the image subdirectory URL, we can construct an
email template. Here is an example:
If you won't be asking for the width and height of the image
on the upload form, remove those attributes from the email
template.
As you can see, the file is uploaded, stored on the server,
and an email with live information created from the template.
Open it in your email reader and, yep, you have an email with
an image displayed within it — assuming you have a capable
email reader, of course.
It does exactly what you want it to do.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2006 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
