Images can greatly enhance the content of a message, and there are three ways to add them to your template.
First, you can drag and drop an image content element into the structure of your message. Drag an image file onto the image element, or click "Browse" to pull up Resources and select or upload an image.
When you have an image selected, click on it to bring up the content properties in the right-hand menu.
"Change image" allows you to select a different image from Resources.
"URL" shows the file path of the current image. You can also copy and paste in the URL of an image stored elsewhere.
The "Adjust to width" toggle will determine whether the image adjusts responsively to the width of the content area.
Note: If the image width is already greater than the width of the content area, this toggle will be automatically enabled.
"Alternate text" is required for ADA compliance. Enter a brief description of the image for users who may be using screen readers or otherwise cannot view it.
The "Action" menu gives you options to open a web page, send an email, make a phone call, or send an SMS text message. The fields below adjust depending on what’s selected in the dropdown.
"Spacing" allows you to adjust the padding, or empty space, around the image. Enable the "More options" toggle to set different spacing on each side.
The background image tool lets you set an image as the background for an entire row. Select a row in the template editor, and use the "Row background image" toggle to add an image behind the elements in that row.
After selecting an image to serve as the row background, you can change the image, edit the image, or paste in a URL for an image stored outside Resources.
Further, there are three checkbox options for how the background image should be applied/positioned:
"Full width" applies the background image to the ENTIRE row when selected. When not selected, the image will only be displayed within the CONTENT AREA on that row (the content area's width is set in the Body > Property pane).
When the "Center" option is selected, the image will be centered. If this option AND the "Repeat" option are both enabled, the image will be centered in the content area and repeated to the left and right.
With "Repeat" selected, the image will display multiple times (tiled) until both the horizontal and vertical area of the row or content area is completely filled. This works best with symmetrical background image patterns. Using "Repeat" along with the "Full Width" option will mean that the image is tiled all the way across the entire row. If the row is taller than the image, the image will be tiled both horizontally and vertically.
Note: The background image feature is known to not work with the following email clients.
- Outlook 2016 on MAC OS X 10.10
- Lotus Notes 7
- Xfinity / Comcast web email client
If the background image cannot be displayed by an email client, it will display the row background color instead. Make sure you also set the background color on the row when you set a row background image, so that recipients using the email clients listed above still see a good-looking email.
Dynamic content thumbnails
The third way to add images to a message is to select “Thumbnail Image” in the Dynamic Configuration you intend to use with your message. This will automatically pull in the image associated with each post, and you can set the maximum width and alignment. To learn more about dynamic content configurations, see Dynamic Content.