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 Resizing an image) and alternate text can be linked to it (see Setting an alternate text).
Dynamic images
Images can be switched dynamically, so that a letter
Background images
Several parts of templates, such as sections and media, and elements such as positioned boxes, can have a background image. Right-click the element and click the Background tab to select an image to be used as the element's background image. See Background color and/or image and Using a PDF file as background image.
Editing PDF files in the Designer is not possible, but when they're used as a section's background, you can add text and other elements, such as a barcode, to them. To create a new Print template from a PDF file, use the PDF-based Print template (see Creating a Print template with a Wizard). To use a PDF file as background image for an existing section, see Using a PDF file as background image.
Filling optional 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, an image or advert can be used as a 'whitespace element'; see Images.
Using images in an Email template? See Using images in email campaigns: tips.
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 the section's source file, 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
Imported or external images
In templates, both imported images and external images can be used.
Imported images are images that are saved within the template file. To import images into a template and add them to the content, you can use the drag-and-drop method or the Select Image dialog (both are explained below).
External images are either located on a specific website (URL), or in a folder on a hard drive that is accessible from your computer. Note that external images need to be available at the time the template is merged with a record set to generate output, and that their location should be accessible from the machine on which the template's output is produced. External images are updated (retrieved) when the output is generated. External images can not be added via the drag-and-drop method. Use the Select Image dialog instead (see below).
For information about referring to images in HTML or in a script, see Resources.
Via drag-and-drop
The drag-and-drop method is a quick way to import one or more images into a template.
- Look up the image file or image files on your computer using the Windows Explorer.
- Select the image (or images, using Shift+click or Ctrl+click) and drag the image file from the Explorer to the Images folder on the Resources pane at the top left.
- To place an image in the content, drag it from the Images folder on the Resources pane to the content and drop it. The image will be inserted in the template at the position of the cursor.
Via the Select Image dialog
To either import an image into a template or use an external image in a template, the Select Image dialog can be used:
- Position the cursor in the content where you want the image to be inserted.
- On the Insert menu, click Image. Or, click the Insert Image button on the toolbar. The Select Image dialog appears.
- Click Resources, Disk or Url, depending on where the image is located.
- Resources lists the images that are present in the Images folder on the Resources pane.
- Disk lists image files that reside in a folder on a hard drive that is accessible from your computer. Click the Browse button to select a folder (or an image in a folder).
As an alternative it is possible to enter the path manually. The complete syntax is: file://<host>/<path>. Note: if the host is "localhost", it can be omitted, resulting in file:///<path>, for example: file:///c:/resources/images/image.jpg. - Url lists image files from a specific web address. Select the protocol (http or https), and then enter a web address (for example, http://www.mysite.com/images/image.jpg).
- With an external image, you can check the option Save with template. If this option is checked, the file will be inserted in the Images folder on the Resources pane at the top left.
If not saved with the template, the image will remain external. Note that external images need to be available when the template is merged with a record set to generate output, and that their location should be accessible from the machine on which the template's output is produced. External images are updated (retrieved) at the time the output is generated.
- Select the image from the list.
- If the image is a PDF file that consists of more than one page, select the desired page.
- Click Finish. The image will be inserted at the position of the cursor.
Using one file that contains a collection of images
When a template that contains lots of images is merged with a large record set, the many file requests may slow down the process of output generation. The solution is simple: combine the images into a single image file and display the part that holds the image. This reduces the number of file requests and can improve the output speed significantly.
For an explanation of how to do this, see Optimizing a template.
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
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.
Using a CSS gradient to create an image
CSS gradients are a new type of image added in the CSS3 Image Module. CSS gradients let you display smooth transitions between two or more specified colors, while repeating gradients let you display patterns. This way, using images for these effects can be avoided, thereby reducing download time and bandwidth usage. In addition, objects with gradients look better when zoomed in a browser, and you can adjust your layout with much more flexibility.
For more information about the various types of CSS gradients and how to use them, see https://developer.mozilla.org/docs/Web/CSS/CSS_Images/Using_CSS_gradients.
When CSS repeating gradients are displayed in a PDF reader, artifacts, like very thin lines may occur. When this happens, try setting the gradient's position a little bit different.