Gmail doesn't support adding images as Base64 strings inside HTML img
tags. Instead, to display images inline with text in Gmail, attach the image to the email using a mixed content type and reference the image(s) inside a img
tag.
Open the Gmail Send Message step.
In the Content type parameter, write:
multipart/mixed; boundary="XXXXboundary text"
ormultipart/related
.Note: You can replace “XXXXboundary text” with any other text used as the boundary in the multipart/mixed message.
The Content-type could also be set as
multipart/related
. Using this option shows the image inline in Outlook and does not affect the rendering in Google. More Details.
The first section between the defined boundary text in the Content parameter is the HTML-formatted email body.
Images to be inserted inline with text are referenced by a Content-ID string:
src=3D"cid:ii_##{{ $.generate_random_string.result }}"
.Use the Generate Random String utility step to generate unique IDs.
Each image is referenced within the code by both an X-Attachment-Id and a Content-Id
Refer to the below code snippet as an example of what to put in the Content parameter.
This is a multipart MESSAGE_TEXT--XXXXboundary text
Content-Type: text/html; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable<div dir=3D"ltr">This is image number one<div><img src=3D"cid:ii_##{{ $.generate_random_string.result }}" alt=3D"image1.=png"></div><br></div>
<div dir=3D"ltr">This is image number two<div><img src=3D"cid:ii_##{{ $.generate_random_string_1.result }}" alt=3D"image2.=png"></div><br></div>
--XXXXboundary text--XXXXboundary text
Content-Type: image/png; name="image1.png"
Content-Disposition: attachment; filename="image1.png"
Content-Transfer-Encoding: base64 X-Attachment-Id: ii_##{{ $.generate_random_string.result }}
Content-ID: <ii_##{{ $.generate_random_string.result }}>##{{ BASE64-ENCONDED-IMAGE-1 }}--XXXXboundary text--XXXXboundary text
Content-Type: image/png; name="image2.png"
Content-Disposition: attachment; filename="image2.png"
Content-Transfer-Encoding: base64 X-Attachment-Id: ii_##{{ $.generate_random_string_1.result }}
Content-ID: <ii_##{{ $.generate_random_string_1.result }}>##{{ BASE64-ENCONDED-IMAGE-2 }}--XXXXboundary text
Content Parameter Explanation
The first section in between the defined boundary text is the HTML-formatted email body. In this example, it contains the email body text as well as
img
tags referencing the images to be displayed inline with the email body text:
--XXXXboundary text Content-Type: text/html; charset="UTF-8" Content-Transfer-Encoding: quoted-printable<div dir=3D"ltr">This is image number one<div><img src=3D"cid:ii_##{{ $.generate_random_string.result }}" alt=3D"image1.=png"></div><br></div> <div dir=3D"ltr">This is image number two<div><img src=3D"cid:ii_##{{ $.generate_random_string_1.result }}" alt=3D"image2.=png"></div><br></div>--XXXXboundary text
Images to be inserted inline with text are referenced by a Content-ID string (
src=3D"cid:ii_##{{ $.generate_random_string.result }}"
). More on the Content-ID below.Each image to be inserted inline requires its own section in between the defined boundary text:
--XXXXboundary text Content-Type: image/png; name="image1.png" Content-Disposition: attachment; filename="image1.png" Content-Transfer-Encoding: base64 X-Attachment-Id: ii_##{{ $.generate_random_string.result }} Content-ID: <ii_##{{ $.generate_random_string.result }}>##{{ BASE64-ENCONDED-IMAGE-1 }}--XXXXboundary text
As you can see in the code snippet above this line, each image is added as an attachment and then referenced by an
X-Attachment-Id
and aContent-ID
properties.This section also contains the Base64 string encoding the image (
##{{ BASE64-ENCONDED-IMAGE-1 }}
)Make sure to update the
Content-Type
for each image to reflect the actual image format for each Base64 encoded image you want to insert inline with the email text.You can use
Generate Random String
steps to generate a uniqueX-Attachment-Id
andContent-ID
for each image.