Add images to email templates

Besides variables and static text, you can add images to the HTML versions of the email header, body, and footer. First, upload the image on the template detail page of the email template where the image must be displayed. Then use the img alt tag in combination with src="${media.get("imagename.ext")}" to load the image. Follow the instructions below for detailed steps on adding images to email templates.

🏷️ Add image to the email header

1

On the email header template detail page, scroll down and click the + Add an image button. Select the image you want to upload to the email header and click update template to upload the image.

2

Reopen the email header template. To display the image in the HTML version of the email header, use the img alt tag in combination with src="${media.get("imagename.ext")}" to load the image. In the default email header template HTML, replace the example filename below with the name of the image you want to display. This adds an image to the email header and replaces the text version of the brand company name in the header.

<tr>
    <td style="height: 70px; font-size: 22px; vertical-align: middle; font-weight: bold">
      #if( $media.contains("LOGO_NAME.EXT") )
        <img alt="$escape.html(${brand.organization})" src="${media.get("LOGO_NAME.EXT")}" style="max-height:120px; max-width:240px;">
      #else
         $escape.html(${brand.organization})
      #end<br>

<img src="${media.get("LOGO_NAME.EXT")}"><br>

3

Once the image has been uploaded and embedded into the HTML code to fit your brand's needs, click update template to add the image to the email header that will be sent to your customers by our branding system.

4

A message indicating the template has been successfully updated will be displayed.

5

You've now successfully added an image to the email header template.

🧾 Add image to the email footer

1

On the email footer template detail page, scroll down and click the + Add an image button. Select the image you want to upload to the email footer and click update template to upload the image.

2

Reopen the email footer template. To display the image in the HTML version of the email footer, use the img alt tag in combination with src="${media.get("imagename.ext")}" to load the image. Place the code block below anywhere in the email footer HTML to display an image in the footer of emails sent by our branding system.

<img src="${media.get("LOGO_NAME.EXT")}" style="max-height:120px; max-width:960px;">

3

Once the image has been uploaded and embedded into the HTML code to fit your brand's needs, click update template to add the image to the email footer that will be sent to your customers by our branding system.

4

A message indicating the template has been successfully updated will be displayed.

5

You've now successfully added an image to the email footer template.

✉️ Add an image to the body of any email template

1

Open any email template you want to add an image to. The example below uses the contact validation email. Once opened, click the add image button, select the image you want to upload to the template, and click update template to upload the image.

2

Reopen the email template you uploaded the image to. To display the image in the HTML version of the email body, use the img alt tag in combination with src="${media.get("imagename.ext")}" to load the image. Add the code below to the HTML version of the email template and replace the example filename with the image you want to display.

<img src="${media.get("LOGO_NAME.EXT")}" style="max-height:120px; max-width:960px;">

<img src="${media.get("LOGO_NAME.EXT")}"><br><br>

3

Once the image has been uploaded and embedded into the HTML code to fit your brand's needs, click update template to add the image to the email template body that will be sent to your customers by our branding system.

4

A message indicating the email template has been successfully updated will be displayed.

5

You've now successfully added an image to the body of an email template.