A+ HTML email confirmation, but no images support?

I have a small problem with A+ confirmation emails using HTML as a feature. The HTML works, but I would like to include nice images around the text to have something like this arriving (example):
http://rebella.sk/emaildecoration/confirmation.html

The problem is that it currently only works when I use <img href="url"> approach which however a) causes many users to not see the images until they confirm to the email client that the agree to download "external resource" and b) I already had one instance when target email system classified our confirmation as SPAM because it linked to unknown external resource (what really, really sux!)

Before I go and try to edit functions.php myself, can some A+ developer here have a look on this (nice example of MIME message with PHPmailer you use in A+) http://stackoverflow.com/questions/1851728/how-to-embed-images-in-html-email
and comment how much work it would be to allow email attachments of images and tag linking to them in the email html text officially in A+ somehow? (before I break something or will be re-doing this after every update).

  • Peter

    Many thanks for the escalation, this is more of a code question on how A+ plugin interacts with PHPmailer library because this library supports constructing emails with attachments just as seen in the example I provided, the A+ plugin is just not using this feature right now.

    What is a pity and I am searching for a way how to tap into this with some workaround (just looking for guidance before I start changing A+ code myself).

    For any coder arriving here: I am looking for a way to create permanent email template as I showed in the confirmation email example above, so even a dirty code to insert into functions.php that would take the three pictures used in the example from url and attach them to all emails leaving A+ would be a solution for me (no integration with A+/WP gui needed). I would then just reference the pictures via tags in the text edited in A+/settings.

  • Jude

    Hi Peter,

    I was looking through your request and the thread you shared on SO. I am giving you a solution that that can be done by adding a few functions to a site specific plugin or a mu-plugin file or although not recommended, in the functions.php of your theme.

    1) First of A+ uses wp_mail() to send out the confirmation mail. This should not be an issue as its powerful enough to handle what you are looking at. To be able to embed images the way you want you need to modify the Content Header as shown here

    Content-Type: multipart/related; boundary="sample-boundary"; type="text/html"

    2) Next you need to have any images you want included as base64 encoded stings with a unique Content ID for each image. If you are using paths make sure its a filesystem path on your server and NOT a url.

    Content-ID: <imageID>

    3) Finally you can reference this attachment in your message body as shown here

    The message body ... 
    
    <img src="cid:imageID" ALT="Some Alt Text">
    
    The rest of the message body ...

    Integrating with A+ in a non obtrusive way

    1) Headers - A+ gives you a hook app_message_headers which lets you modify headers before sending out the mail. Alternately wp_mail() lets you set content type using wp_mail_content_type. Look at the function message_headers() on line 4794 in appointments.php to see how the headers are constructed.

    2) Body - You can manipulate the body by appending multiple images in the format you prefer. A safe place to hook into and modify content is app_confirmation_message . Alternately if you are adding image attachments to the message and would like to reference them the best place will be app_confirmation_email_attachments

    3) As a last resort if you still want to use an external library, consider directly modifying the send_confirmation function on line 4373 in appointments.php. Doing this however will lead to breaks on upgrades and will require redoing your changes.

    Hope these pointers helped and all the best with your project.

    Cheers,
    Jude

  • Peter

    Hello Jude,

    Ok, I think I understand this a bit better now. What I would like to try is to modify app_message_headers and app_confirmation_message with manually constructed multipart messages + boundaries + base64 encoded image.

    However, I do not see where some of these are defined. For example the app_confirmation_message I can set via setting admin gui, however the app_message_headers and app_confirmation_email_attachments ( I also noticed this app_confirmation_email_attachments going to wp_mail() inside function send_confirmation) are where ? I searched recursively all appointments plugin files.

    Are these inside the database maybe ?

  • Peter

    Hmm, ok, progress, I managed to insert image and successfully use it inside HTML email with base64 coding. Two steps for this were needed.

    Step 1) editing this line inside appointments.php (inside message_headers() on #line 4794):
    $message_headers = "MIME-Version: 1.0\n" . "From: {$blogname}" . " <{$admin_email}>\n" . "Content-Type: {$content_type}; charset=\"" . get_option('blog_charset') . "\"\n";

    and change it like this:
    $message_headers = "MIME-Version: 1.0\r\n" . "From: {$blogname}" . " <{$admin_email}>\r\n" . "Content-Type: multipart/related; boundary=e89a8f502e702c653e050b751100";

    Step 2) I had to manually construct the whole email, including base64 images, borders and both plain and html alternative mime message (to support mobile clients and blackberry). Technically then if I copy&paste my email structure (including base64 images) into the "confirmation email message "settings dialogbox of A+, I was able to send it (lucky that this dialog box has no input limit as having three images as text encoding is ~300 000 characters each image).

    Conclusion
    I will play some more to clean some last problems and then maybe put back here on forum some more finalized examples.

    But I have last question before marking as resolved. Because I really do not like that I needed to edit appointments.php to have a change in message_headers() for changing the html -> multipart headers.

    Any quick idea how to make the headers format also configurable from the admin GUI ? Just as I was able to nicelly edit content of to email <body> via $this->options["confirmation_message"] in my "step 2)", similar option to managing email headers should be made possible for admins by making headers part of the options structure and exposing them in settings. This would allow me to not have to do "Step 1)" with editing "message_headers()" on next A+ upgrade.

    PS: I am attaching here the email I used to construct test HTML email for A+ confirmations and as able to send it out (it includes three images). You can use this to follow, just select your own border texts and update both plain and HTML text (A+ managed to nicely replace things like CLIENT, SERVICE, DATE_TIME as usual).

  • Jude

    Hey Peter

    I have written a small add-on that makes doing this possible. I am attaching the plugin file, you can use it as is or pick up snippets and add it to your own code. This can be done with 3 functions. One to handle the admin GUI bit and the other two to get and save the header text. Hope this helps :slight_smile:

    I am not fully sure if this adds value as part of the codebase as most users may not know how to use it properly, even a small mistake here would break email functionality and it may end up causing more harm than good. I will however maintain this in a separate repo, should any of our members require it.

    Wishing you a Happy New Year
    Jude

  • Peter

    Hello Jude,

    Many thanks and happy new year to you as well.

    I will check your plugin code to see how that was done and integrate it manually. On this point I have quite a lot of changes to appointments.php in the two topics we solved here in the last days, so I will continue having custom changes until at least one of these features become part of main trunk.

    Many thanks for your support!

    With regards
    Peter

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.