Document how to embed image attachments (src="cid:xxx")

Created on 28 August 2024, 3 months ago
Updated 12 September 2024, 2 months ago

Problem/Motivation

Email clients like Outlook accept img src attributes in cid: format as part of the mime spec

This syntax is used to embed images directly within an email rather than linking to an external source.

Breakdown of the src attribute:

cid:: This stands for "Content ID". In MIME emails, cid: is used to reference a specific part of the email that contains the image data. The image is embedded as a separate part within the email and is referenced using this cid: identifier.
Example: src="cid:image005.png@01D8C431.94646A40"
This is the Content ID itself, which is a unique identifier that links the src in the HTML part of the email to the embedded image. The format of this ID can vary, but it usually includes a filename and some unique identifiers (like the parts after the @ symbol), which help to ensure that the correct image is displayed.

Practical Usage:

When an email client receives an email with this kind of embedded image, it looks for the part of the email with the matching Content ID and displays that image at the location specified by the src attribute. This approach is often used in HTML emails to ensure that images display correctly even if the recipient's email client doesn't automatically download external images.

Why This Matters:

Embedded Security: Since the image is embedded, it reduces the need for the email client to fetch external resources, which can be more secure and avoid privacy issues related to tracking pixels.

Offline Viewing: The embedded image is included directly in the email, so the recipient can view the images even if they are offline or have network issues.

Consistency: Ensure that branding and visuals are consistently displayed regardless of email client settings.

Steps to reproduce

N/A

Proposed resolution

TBD

Remaining tasks

TBD

User interface changes

TBD

API changes

TBD

Data model changes

TBD

📌 Task
Status

Active

Version

2.2

Component

Documentation

Created by

🇨🇦Canada joseph.olstad

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @joseph.olstad
  • Status changed to Postponed: needs info 3 months ago
  • 🇦🇺Australia imclean Tasmania

    This is already possible.

    Including an image or other file reference within the HTML or template file, which can either be a path to the image or base64 encoded data within the <img> tag, will result in the image being embedded and referenced by the cid.

    I'll leave this open, let me know if you have a different scenario in mind.

  • 🇨🇦Canada joseph.olstad

    ╭─◀ ☕ j olstad ▶ ~/drupal.org/phpmailer_smtp ▶ 📂4 📃12 🔗0 ▶ 🔀 2.2.x ▶
    ╰❯ $ grep cid * -iR
    README.md: prevent you from accidentally sending out e-mails to real users from a

    Hello @imclean,
    I grepped the entire codebase of phpmailer_smtp , no documentation on cid, no code mentioning cid and I didn't find any documentation on this subject relating to the phpmailer_smtp module.

  • Status changed to Active 3 months ago
  • 🇦🇺Australia imclean Tasmania

    @joseph.olstad phpmailer_smtp uses the PHPMailer library as much as possible rather than duplicating its functions. For example, you won't find a single preg_match in the module either, and all address parsing is done by the library.

    To understand how the module works it helps to have some knowledge of the PHPMailer library.

    Specifically, in the format() method of Drupal\phpmailer_smtp\Plugin\Mail\PhpMailerSmtp there is the following line:

    $this->msgHTML($rendered, DRUPAL_ROOT, TRUE);
    

    This sends the message HTML to the PHPMailer library for processing, including inline attachments. So rather than a bunch of if/then/else statement and calling the inline attachment functions directly, this leaves it up to PHPMailer to determine, including generating a cid.

    Have a look at /vendor/phpmailer/phpmailer/src/PHPMailer.php for more information.

    I've changed this to a task so if the documentation is lacking in this area I'm happy to accept an MR.

  • 🇨🇦Canada joseph.olstad

    I'll be digging more into this tomorrow and run some more indepth tests.

    I scoured d.o for related documentation, it is very light.

    I've dug a bit more into the PHPMailer library and it is starting to possibly make sense.

    I'll try a few things soon and see how it goes.

  • 🇨🇦Canada joseph.olstad

    Ok wow, the phpmailer library makes this too easy. Simply include an <img src="data:base64:xyz"> element, it's auto converted to a file attachment and the src= value changes to cid:phpmailer-0something automatically. something that Outlook can consume.

    Magic happening here!

    Would be great to have a bit of background with this along with some simple documentation.

  • 🇦🇺Australia imclean Tasmania

    <img src="/path/to/image.png"> will also work.

  • 🇦🇺Australia imclean Tasmania
Production build 0.71.5 2024