Adding images is one of the easiest ways to enhance the effectiveness and appearance of your messages. For example, you can insert:

pictures to break up chunks of text;
graphics (such as a pie chart) to represent numerical data; and
icons and emojis to "lighten" the tone of the message and make it less formal.

And let's not forget the most important image of all: your organization's logo!

When you add images to a template, those images are then automatically included in any messages that are based on that template—which saves you having to add the images to each message that you create.

Logos and icons

You can add your logo as well as social-media site icons to a template. These are slightly more "specialized" image options and are described in dedicated articles.

Logo layouts are in the Headers grouping in the designer and are described in Image/Logo Properties Editor.
Social-media site icons are in the Footers grouping (plus the Icon Set layout in the Static Elements grouping) and are described in Icon Set (Social Media Icons).

This article describes how to add and manage images in a Template Designer 2 (TD2) template.

Image layouts in Template Designer 2

There are several image-based layouts in the Static Elements palette on the Build tab:

Image with Text - this layout simplifies having descriptive or explanatory text next to an image. The text is managed in the text editor and the image in the Image Properties panel that is described below.
Image - the preferred layout for standalone images. The image is managed in the Image Properties panel, described below.
Image Gallery - this layout accommodates a group of images. Several pre-set configurations have recommended image widths and the images are managed in the Image Gallery Properties panel that is described below.

Add an image-based layout

TIP: As you work with images in your template, your changes are immediately apparent on the design canvas. Also, you can undo and re-do actions via the icons above the canvas.

To add an image-based layout:

Navigate to the Design > Build tab.
Expand the Static Elements group.
Click-&-hold and drag an image-based layout to the canvas and drop it in place.

TIP: The precise location isn't crucial right now because you can reposition the layout later.

The layout is selected on the canvas and the associated "properties" panel opens on the left. You can:

start configuring the properties or
click the Back button in the panel to add another layout. The layout that you added remains in place; you can configure it later.

NOTE: When you add an Image with Text layout, the Image with Text Properties panel displays. This panel is unique to this layout and has settings that other layouts don't have.

The sections that follow describe how to:

add an image in the different layouts and
manage image properties and display settings.

Image Properties panel settings

The Image Properties panel displays for two layouts: Image with Text and Image. The settings on the Content and Style tabs are described in the tables below.

NOTE: Note that the Image with Text Properties panel, described later in this article, is used to manage the properties (background color, padding, etc.) of the actual content block element, not the images it contains.

Content tab

Refer to this table when configuring these settings.

Setting	Description
Image	Click Select image to access the image-file selector. After you've selected an image, the section displays a preview. You can: Click the file name (e.g., top-banner.jpg) to open the image-file selector and choose a different image. Click the X to delete the current image; the file name is replaced by Select image which you can click in order to select a replacement image. Click the Edit Image button to open Image Editor and make changes.
Alt text	Specify the text that you want used for the image in the Text version of messages that are built on this template.
Add hyperlink	Click to open the hyperlink dialog with the type pre-set to Web Page; specify the following settings. (If you choose a different hyperlink type, different settings display.) url - Specify the URL to which the image will link. name - Specify a name for the hyperlink (used for web tracking). Disable tracking - Check the box to disable web tracking for this hyperlink; uncheck the box to enable web tracking. Click Insert Hyperlink.
For mobile version	Choose whether to use this image, use a different image, or to hide this image for messages that are built on this template when they display on mobile devices.
Add image caption	Check the box to expand the field. Input your preferred caption and, optionally, use the Text style dropdown to change the appearance of the text.

Style tab

This section describes the Style settings.

Image layout

This layout has only one Style setting: Alignment.

Click the dropdown to set the horizontal position of the image: left, center, or right.

Image with Text layout

This layout has several Style settings, some of which influence others.

Setting	Description
Alignment	Click the dropdown to set the horizontal position of the image (and its caption) *in relation to the text. Choose left, top* [i.e., above], or right. Your choice influences the Padding options; refer to Padding in this table. If Alignment = top, an additional setting, Position, displays; this is described below.
Position	Click the dropdown to set the horizontal position of the image in relation to its caption. Choose left, center, or right.
Padding	Click the dropdown to set the amount of space (in pixels) between the image and the text. If Alignment = left, you can set right and bottom padding If Alignment = right, you can set left and bottom padding If Alignment = top, there's only bottom padding

Image Gallery Properties panel

The Image Gallery Properties panel has unique settings because you add and manage individual images but you also configure settings that apply to a single item: the gallery.

Manage the Gallery

Configure these settings to customize the appearance and layout of the images in the gallery.

Setting

Description

Size of images

Click the dropdown to set the configuration of the images in the gallery.

The more images per row, the smaller those images will be, and vice versa.
Experiment with the options before you add your images; the placeholder on the canvas provides "size-of-image" samples, such as the Large option shown below.

Choose a configuration:

Image alignment

Choose either Justified or Left as the position of the images within the gallery.

TIP: You have to add images in order to see the effect of this setting because the "size-of-image" samples do not reflect this setting.

Both of the following examples have the Medium - 124px (Maximum 4 per row) setting.

Justified

Left

After you have set the configuration and alignment, click (+) Add image (under Image alignment) to populate your image gallery.

Add and manage images

You can manage (add, remove, and reposition) your images as described in this section.

Setting	Description
up arrow and down arrow	Click these to rearrange the left-to-right order of the images.
trashcan icon	Click this to remove the image. Click Remove at the confirmation prompt.
Image	Click Select image to access the image-file selector. After you've selected an image, the section displays a preview. You can: Click the file name to open the image-file selector and choose a different image. Click the X to delete the current image; the file name is replaced by Select image which you can click in order to select a replacement image.
Alt text	Specify the text that you want used for the image in the Text version of messages that are built on this template.
Add hyperlink	Click to open the hyperlink dialog with the type pre-set to Web Page; specify the following settings. (If you choose a different hyperlink type, different settings display.) url - Specify the URL to which the image will link. name - Specify a name for the hyperlink (used for web tracking). Disable tracking - Check the box to disable web tracking for this hyperlink; uncheck the box to enable web tracking. Click Insert Hyperlink.

Example

The following image shows a completed image insertion. Note the:

image preview,
image file name,
alternative text for the Text version of the message, and
validated web address.

Image with Text Properties panel

Use the Image with Text Properties panel to manage the properties (background color, padding, etc.) of the actual content block element.

To manage the image's properties, refer to Image Properties panel, above.