Images

Images are a powerful ingredient in all of your templates. This topic explains how to add and use them. Currently the supported image formats are:

  • BMP
  • EPS
  • GIF
  • JPG/JPEG
  • PDF
  • PNG
  • SVG
  • TIF/TIFF

Base64 encoded images are supported; however, they are added differently: set the src attribute of an <img> element to the base64 code (see below, HTML tag: img).

For Email and Web output, PNG is the preferred image format.
EPS, PDF, SVG and TIFF images in an Email or Web section are automatically converted to PNG to ensure that they can be seen in the browser or email client.

32-bit BMP files are not supported.

16-bit TIFF images with LZW compression are not supported.

Tip: For better quality of images in PDF output files, use vector images (e.g. SVG, EPS) rather than bitmap images (BMP, JPG, etc.).

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).

Tip: Using images in an Email template? See Using images in email campaigns: tips.

Dynamic images

Images can be switched dynamically, so that a letter, email or web page 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 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 or other image as background.

Tip: 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.
The quickest way to create a Print template based on a PDF file is to right-click the PDF file in the Windows Explorer and select Enhance with Connect. Alternatively, start creating a new Print template with a Wizard, using 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 or other image as background.

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 Whitespace elements: using optional space at the end of the last page.

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

This section explains the difference between imported and external images and describes a number of ways to add images to a template.

Note: The Connect image cache size is limited to 100MB. This allows most output jobs to run faster. However, if a job requires more than 100MBs of image files, then the Connect image cache size can be increased to cater for such. Please contact OL Support for instructions on how to modify the image memory cache value, if needed. (See also: Limit of 100MB of image files within a single job.)

Note: An image with an unknown file extension is represented by a red cross in the output, but no error is logged unless the image refers to a local file that does not exist on disk.
Image file extensions that the software recognizes are: AFP, BMP, EPS, GIF, JPG/JPEG, PCL, PDF, PNG, PS, SVG, and TIF/TIFF.

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. To refresh them at any other time, use the Refresh option in the menu (View > Refresh) or the Refresh button at the top of the Workspace.
External images can not be added via the drag-and-drop method. Use the Select Image dialog instead (see below).
If you add an external image via the Source tab or via a script, and the URL doesn't have a file extension, you have to add the filetype parameter to the URL manually. Specify the file extension as its value, for example: ?filetype=pdf, or &amp;filetype=pdf if it isn't the first parameter. Note that the ampersand character needs to be encoded as &amp;.

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.

  1. Look up the image file or image files on your computer using the Windows Explorer.

  2. 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.

  3. 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.

    Or, keep the Ctrl key pressed down while dragging to insert the image in a Positioned Box.

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:

  1. Position the cursor in the content where you want the image to be inserted.

  2. On the Insert menu, click Image. Or, click the Insert Image button on the toolbar. The Select Image dialog appears.

  3. 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. You can give a local path (e.g. C:\Images\Test.jpg) or use the "file" protocol. The complete syntax of a fully qualified URL with the "file" protocol 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.
      If the file is located on another server in your network, the path must contain five slashes after "file:".

      Note: Mapped network drives are usually not accessible to the server. Use a UNC path instead (e.g. file://///myserver/myfolder/file.txt).

    • 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).

    Note: If a URL doesn't have a file extension, and the option Save with template is not selected, the Select Image dialog automatically adds the filetype parameter with the file extension as its value (for example: ?filetype=pdf (if it is the first parameter) or &amp;filetype=pdf).
    The filetype, page and nopreview parameters are not sent to the host; they are used internally. Therefore, URLs that rely on one of these parameters cannot be used.

    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 it isn't saved with the template, the image remains 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.

  4. If the image is a PDF file that consists of more than one page, select the desired page.

    Note: The number of pages in a PDF file cannot be determined via the HTTP and HTTPS protocols. If you wish to use a page other than page 1 in a remote PDF, check the option Save with template; then click OK and reopen the dialog. Next, on the Resources tab, select the PDF, and select a page.

  5. Click Finish. The image will be inserted at the position of the cursor.

    If an image with the same name already existed in the template, you have the option to overwrite the existing image, use the image that was already in the template, or keep both. In the latter case, the new image is renamed.

Importing images from another template

To import images directly from another template, click File > Import Resources... in the menu. See: Import Resources dialog.

Using one file that contains a collection of images (a 'sprite')

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. One solution is to combine the images into a single image file (an 'image sprite') 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 Creating and using image sprites.

Base64 encoded images

To insert a base64 encoded image into a template, you need to go to the Source view, insert the <img> tag manually and set its URL - the src attribute - to the base64 string, for example: <img src=""data:image/gif;base64,R0lGO...">.
If the base64 string is present in one of your data fields, you can set the src attribute dynamically. For instructions see How to use the captured or selected image in a template.

Note that the image will not be visible in Design mode, but it will appear in Preview mode.

Moving an image

An image that is added to a section behaves like a character and is part of the text flow. To move it, simply click the image and drag and drop it somewhere else in the text flow. To learn how to wrap text around it, see Wrapping text around an image.
How to make an image stay at a certain position (like any image added to a Master Page) is explained here: Pulling an image out of the text flow. When an image has an 'absolute position' it can be moved around freely: hover over the border of the image to get a move pointer, click that pointer and drag and drop the image somewhere else.

Resizing and styling an image

Images can be resized using the handles on the sides and corners, or via the Image Formatting dialog, which opens when you right-click the image and select Image..., or select the Format > Image menu item.
Images can be styled using the same dialog, or through the CSS files; see Styling templates with CSS files.

A number of issues related to image styling are discussed in a separate topic: Styling an image.

Just like many other elements, images can be given borders and rounded corners, they can have inner and outer margins and they can be rotated. How to do this is described in general formatting topics, such as Border and Spacing. All general formatting topics are listed under Styling and formatting.

Tip: If placed in a Box, images are by default resized to fit that container. To change this behavior, change the Fit within frame setting in the Image Formatting dialog, the Attributes pane or set the image's object-fit property in CSS. For examples, see MDN Web Docs - object-fit.
More ways to scale and crop images are described in this how-to: Scale and crop images.

Note: It is recommended to resize images outside of the Designer, with image editing software.

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 and on web pages at the position of the image while the image is loading and when the image is not found. On web pages, alternate texts are also used for accessibility.

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.

How to handle missing images

If an image is missing, OL Connect will always display the alternate text; see Setting an alternate text.

If there is no alternate text, a small image showing a white cross on a red background will be displayed to signal that the image is missing.

This default image is only visible in Design and Preview mode, not in the final output.

In addition, a data-broken-image attribute is added to the <img> element to specify that the image is broken. This attribute can be used in the selectors of scripts and CSS to apply custom styling or to insert a custom fallback image.

Note: If an image is missing, the alternate text will be visible and any style rules defined for the data-broken-image attribute will be applied in Design and Preview mode and in the final output.

Tip: For examples see this how-to: Handling missing images. It also explains how to cancel a job or skip items in case of missing images.

Examples

The following style rule specifies a fallback image that is located in the Images folder in the template's Resources folder.

Example: [data-broken-image] { background-image: url('../images/fallback.png'); }

The style rule could be located in the file: context_all_styles.css or in the style sheet for a specific context type. (See Styling templates with CSS files.)

If you use a script to set the fallback, it needs to have the selector: [data-broken-image]. The script could look like this:

Example:

Copy 
let fallbackImgSrc = 'images/fallback.png';
results.attr('src', fallbackImgSrc);

Note: Relative file paths are different in scripts and CSS. A stylesheet takes it own location as starting point for relative paths, while a script takes the document location as starting point.

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 image files 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.

Note: 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.