Images

Images are a powerful ingredient in all of your templates. This topic explains how to add and use them.

Ways to use images

In templates, both imported images and external images can be used (see Adding images and Resources). Once added to the content of a template, an image can be resized (see Styling an image) and alternate text can be linked to it (see Setting an alternate text).

Dynamic image

Images can be switched dynamically, so that a letteror email can include one image or another, depending on a value in the data set. Read Dynamic Images to find out how to add such switching images.

Background image

Several parts of templates can have a background image. See Background color and/or image and Using a PDF file as background image.

Optional filler for whitespace

Conditional content and dynamic tables, when used in a Print section, may or may not leave an empty space at the bottom of the last page. To fill that space, if there is any, use an image or advert as a 'whitespace element'; see Images.

HTML tag: img

When you add elements, such as text, images or a table, to the content of a template, you are actually constructing an HTML file. It is possible to edit the source of the HTML file directly in the Designer; see Editing HTML.

In HTML, images are <img> elements. The <img> tag has at least four attributes: src, alt, width and height. Src specifies the URL of the image. Alt contains the alternate text; see Setting an alternate text.

The value of the attributes can be changed via a script; see Attributes.

Adding images

To add an image to a template:

1. Select Insert > Image > From file, or click the Insert Image button on the toolbar. A standard Open File dialog appears.
2. Browse to the file and click Open.
3. Check the option Save with template to import the image. Imported images are saved within the template file, so they are always available and don't depend on external paths, servers or URLs. If this option is checked, the image file will be inserted in the Images folder on the Resources pane at the top left.
   Uncheck this option if the image should be used as an external image (see also: Using external images).
4. Click Finish. The image will be inserted at the position of the cursor.

Alternatively:

1. Look up the image file on your computer and drag the image file from the Explorer to the Images folder on the Resources pane at the top left.
2. To place the image in the content, drag it from the Images folder on the Resources pane to the content and drop it.

To import a remotely stored image, see Using external images.

Using external images

An external image is an image that is not saved within the template file. It is located either on a specific website (URL) or on a hard drive that is accessible from the machine on which the template's output is produced.

When external images are used, they are updated (retrieved) when the template is merged with a record set to generate output.

To use an external image:

1. Position the cursor in the template where you want the image to be inserted.
2. On the menu, select Insert > Image > From address, or on the toolbar, click the Insert Image from address button. The Insert Image from Address dialog appears.
3. Enter the URL. This can either be
• a web address (http://www.mysite.com/images/image.jpg), or
• a local path, for example: file:///c:/resources/images/image.jpg. The complete syntax is: file://<host>/<path>. If the host is "localhost", it can be omitted, as it is in the example, resulting in file:///<path>. The empty string is interpreted as `the machine from which the URL is being interpreted'.
4. Enter an alternate text. This text will be shown in emails at the position of the image while the image is loading and when the image is not found.
5. Click Finish. The image will be inserted at the current position of the cursor in the template.

For information about referring to images in HTML or in a script, see Resources.

Styling an image

Images can be styled using the Format > Image menu item. They have a border, margin and padding; see Border and Spacing. Images can also be left-aligned or right-aligned, just like boxes.

Resizing an image

There are three ways to resize an image after inserting it in the content of a template.

• Click the image and drag the handles to resize it. Press the Shift key while dragging, to scale the image proportionally.
• Select the image (see Selecting an element) and type the desired width and height in the respective fields on the Attributes pane.
• Select the image and select Format > Image, on the menu. On the Image tab, change the width and height of the image.

Positioning an image

Initially an image will float to the left. Select the image (see Selecting an element) and use the (Float left), (No float) and (Float right) icons on the toolbar to change the position of an image within the text.

• The Float left button aligns the image to the left. The text is positioned to the right of it and is wrapped around the box.
• The Float right button aligns the image to the right, with the text wrapped around it to the left.
• The No float button positions the image where it occurs in the text.

To position an image using the menu, select the image and then select one of the options in Format > Float.

Alternatively, select the image and on the menu, select Format > Image and on the Image tab, set the Float property. This is equivalent to the float property in CSS.

Rotating an image

To rotate an image, select the image (see Selecting an element) and select Format > Image, on the menu. On the Image tab, set the rotation angle of the image in clockwise degrees. This is equivalent to the transform:rotate property in CSS.

Setting an alternate text

Once an image has been inserted in the content of a template, it can have an alternate text. The alternate text will be shown in emails at the position of the image while the image is loading and when the image is not found.

To set an alternative text, click the image and enter the alternate text in the Alternate text field on the Attributes pane at the top right.