Tuesday, January 08, 2013

Previewing an HTML email

Following on from my previous post about creating emails and sending them to a mailing list, the Occupational Psychologist asked me whether it is possible to add pictures to the emails. Whilst this is not an area in which I have great expertise, I was able to answer in the affirmative because the original HTML code which I found included a picture.

But my problem then became - how does the program know where to insert the picture (top, middle, bottom)? I solved this problem - or at least, postponed it - by adding a radiogroup to the form which allows the user to choose either top and bottom, and then simply add the HTML code necessary in the correct place:
if rg.itemindex = 0 then add ('!img src="' + laPicture.Text + '"!br!');
for ml:= 1 to mem.lines.count do add (mem.lines[ml - 1] + '!br!');
if rg.itemindex = 1 then add ('!img src="' + laPicture.Text + '"'!br!');
The above snippet again has substituted an exclamation mark for an angle bracket as the editor here does not like HTML code, even if it's within a blockquote passage.

I sent myself an email and discovered that the picture's path had best not contain any Hebrew text; it's best to store such a picture in the root directory of C or c:\windows\temp.

I then tried to second guess the OP, wondering what she would ask for next. As the email is now no longer WYSIWYG because of the picture, she would probably want to see a preview. No problem (or so I naively thought)! All I need to do is save the HTML code in a file, fire up the default Internet browser and tell it to read the file which I have just created.

First problem: the HTML code was only created in response to clicking the 'email' button, which would actually send the email. Thus I need to create the HTML code once for preview, storing it in a file, and once for sending. This actually is not too bad, as the user could change the text of the email, requiring the HTML to be recreated. Once I got past this stage, I then discovered that my Hebrew text was appearing as garbage letters.

I started googling Unicode and similar matters, only to discover that if I did try creating a unicode file (not necessarily a simple matter in Delphi 7), the result would still not appear correctly. Then I remembered that browsers have an 'encoding' option; once I used the correct encoding on my displayed page, the correct text was displayed. How can I avoid the user having to choose the correct encoding every time? By putting the instruction in the HTML file, of course! This requires inserting some code directly after the !html! line in the header - !meta http-equiv="Content-Type" content="text/html; charset=windows-1255"!. Windows-1255 is the default page for Hebrew. Once this instruction was inserted, the Hebrew text appeared correctly.

Last flourish: instead of my programming calling the default browser to display the code, why not include a minimal browser in my own program? This would allow me to delete the temporary file which I had created every time the preview screen closes. As this is Delphi, it was no problem to find the TWebBrowser component and insert it into a form. The browser is told to display the file by calling its Navigate method. Simple as pie.

What's left? Well, it would be nice to display a picture in an arbitrary place in the letter. I could do this by replacing the radiogroup with an edit box, asking the user in which line to place the picture (0=top, 999=bottom, 5=after the fifth line, etc) but this may be too much. I'll find out on Friday.

Another possibility would be always adding a picture, such as the OP's logo, at the bottom of the letter. This would require storing the name of the picture in the database, but is simple to implement.

No comments: