Add images to email templates
Besides variables and static text, you can add images in the HTML versions of the email header body & footer. First, you'll need to upload the to-be-added image on the template detail page of the email the image needs to be displayed in. Then you can use the img alt tag in combination with scr ="${media.get("imagename.ext")}" to collect the images. For detailed instructions on adding images to email templates, follow the instruction below.
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 wish to upload to the email header and click update template to upload the image
Important
When an image upload has not been completed by updating the template, adding the image into the HTML version of the header will not display a preview of the image.
2
Reopen the email header template. To display the image in the HTML version of the email header, you can use the
img alt tag in combination with
scr ="${media.get("imagename.ext")}" to collect the image. In the default email header template HTML, change the below information with the image name you wish to display to add an image to the email header and replace 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>
Important
You can customize the HTML code as desired. If you opt for a complete restyle of the default HTML email header template, make sure you collect the image(s) you wish to display with the img alt tag in combination with scr ="${media.get("imagename.ext")}".
<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 wish to upload to the email footer and click update template to upload the image
Important
When an image upload has not been completed by updating the template, adding the image to the HTML version of the footer will not display a preview of the image.
2
Reopen the email footer template. To display the image in the HTML version of the email footer, you can use the
img alt tag in combination with
scr ="${media.get("imagename.ext")}" to collect the image. Place the below code block anywhere in the email footer HTML to display an image in the footer of the email for all emails that are 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 through email 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 wish to add an image to, we'll use the contact validation email in the example below. Once opened, click the add image button and upload select the image you wish to upload to the template and click update template to upload the image
Important
When an image upload has not been completed by updating the template, adding the image into the HTML version of the header will not display a preview of the image.
2
Reopen the email template you just uploaded the image to. To display the image in the HTML version of email body, you can use the
img alt tag in combination with
scr ="${media.get("imagename.ext")}" to collect the image. In the HTML version of the email template, add the below information with the image name you wish to display to add an image to the email body.
<img src="${media.get("LOGO_NAME.EXT")}" style="max-height:120px; max-width:960px;">
Important
You can customize the HTML code as desired. If you opt for a complete restyle of the default HTML email template, make sure you collect the image(s) you wish to display with the img alt tag in combination with scr ="${media.get("imagename.ext")}".
<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.
