This is the second instalment in a series that shows how to use two functions to improve the appearance of your emails. Last time, we discussed how to use Markdown to decorate email text with basic features such as headings and bullet points. This time, we will explain how to embed images into the body of emails. Using these functions can help make email content easier to understand.
Previous Post: HTML Email: Markdown chapter
- Basic chapter: sending an email with a fixed mail body to a fixed address
- Mail body chapter: changing the body of an email using embedded commands
- Address embed chapter: changing the address of an email using embedded commands
- HTML Email chapter: sending an HTML email
- HTML Email: Markdown chapter – Converting Markdown to HTML and Sending HTML Emails (Last Time)
- HTML Email: Inline Images chapter – Embedding in Emails and Sending HTML Emails (This Time)
- Non-delivery response chapter: troubleshooting when an email has not arrived
Embedding Image Files in the Email Body
Effective from Questetra Version 16.2 it is now also possible to embed images into the body of emails sent from a [Throwing Message Intermediate Event (email)]. Images can be placed between sections of text, which will allow you to add more color and information to your emails.
This can be implemented using a File-type Data Item and a short line of code which will be input in the settings of the [Throwing Message Intermediate Event (email)], again, in the Body (HTML) section.
File-type Data Item
First, you must set up a File-type Data Item in your Workflow App. For the purpose of this example, we will create a data item called “Image” with the Field Name “q_image”.
Throwing Message Intermediate Event (email) Settings
When selecting image files in the File-type Data Item, you can embed these files in an email using the following two steps:
1. Copy the following code into the Body (HTML) section.
<img src="cid:#{#q_image?.get(0)?.getId()}">2. In the Attachments / Inline Images section, select Inline Images and select the data item “Images” from the dropdown.
Embedding Multiple Images
The above code will only enable one image to be embedded. For embedding more than one image additional code lines must be included, one line for each image.
It is important to note that when implementing code that enables multiple images to be embedded, the expected number of files must be attached. An error will occur if image code lines are unused. I.e. If the Body (HTML) section contains code to allow three images to be embedded (as in the example image below), then three images must be attached to prevent an error from occurring. If two or fewer images are attached, then an error will occur and the email will not be sent.
For embedding multiple inline images, the second and subsequent images require the code
<img src="cid:#{#q_image?.get(1)?.getId()}">For the second image
<img src="cid:#{#q_image?.get(2)?.getId()}">For the third image, and so on, incrementing the number in the get(2) bracket for each subsequent image you wish to embed.
Please be aware that the above code lines will only work if the Field Name of your File-type Data Item is “q_image”. If you have given the File-type a different Field Name, please swap the section “#q_image?” for “#q_{your field name}?”.
Inline images can be embedded in the email body alongside normal text and markdown. In this example, the Signature data item has also been added to the end of the email body, which includes pre-written markdown in the data item’s Initial Value.
The email below shows the results of the markdown in the order in which it has been entered in the [Throwing Message Intermediate Event (email)] Body (HTML); the markdown in the Meeting Agenda / Minutes data item, followed by the inline images, and finally the signature at the bottom.
Summary
In this article, we covered two key features to enhance the appearance of your emails. First, we explained how to embed images within the email body. Including images in your emails can make them more interesting and easier to understand.
By also utilizing the Markdown feature introduced last time, you can create more professional and effective emails for both business and personal communication. Please feel free to try them out.