Add images to web page templates

Besides variables and static text, you can add images to the webpage header body & footer. First, you'll need to upload the to-be-added image on the template detail page of the webpage 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 webpage templates, follow the instruction below.

Add image to the webpage header	Add image to the webpage footer	Add an image to the body of any webpage template

Add image to the webpage header

On the webpage header template detail page, scroll down and click the + Add an image button. Select the image you wish to upload to the webpage 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.

Reopen the webpage header template. To display the image in on webpage header, you can use the img alt tag in combination with scr ="${media.get("imagename.ext")}" to collect the image. In the default webpage header template HTML, change the below information with the image name you wish to display to add an image to the webpage header

<div class="container mb-4">
    <div class="row">
        <div class="col-lg-8 mx-auto px-5 py-4">
            #if( $media.contains("RTR_logo.png") )
                <img alt="$escape.html(${brand.organization})" src="${media.get("RTR_logo.png")}">
            #else
                <h2>$escape.html(${brand.organization})</h2>
            #end
        </div>
    </div>

Important

You can customize the HTML code as desired. If you opt for a complete restyle of the default HTML webpage 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><br>

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 webpage header that will be sent to your customers by our branding system.

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

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

Add image to the webpage footer

On the webpage footer template detail page, scroll down and click the + Add an image button. Select the image you wish to upload to the webpage 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 into the HTML version of the footer will not display a preview of the new image.

Reopen the webpage footer template. To display the image in on webpage footer, you can use the img alt tag in combination with scr ="${media.get("imagename.ext")}" to collect the image. In the default webpage footer template HTML.

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

Important

You can customize the HTML code as desired. If you opt for a complete restyle of the default HTML webpage footer 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>

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 webpage footer that will be sent to your customers by our branding system.

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

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

Add an image to the body of any webpage template

Open any webpage template you wish to add an image to, we'll use the contact validation webpage in the example below. Once opened, click the add image button and 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 template will not display a preview of the image.

Reopen the webpage template you just uploaded the image to. To display the image in the HTML version of the webpage 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 webpage template, add the below information with the image name you wish to display to add an image to the webpage 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 webpage 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>

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 webpage template body that will be sent to your customers by our branding system.

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

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