|
|||
ImagesImages 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, PNG, GIF, JPG/JPEG, TIF/TIFF, PDF, EPS and SVG. Ways to use imagesIn 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). Using images in an Email template? See Using images in email campaigns: tips.
Dynamic imagesImages can be switched dynamically, so that a letter Background imagesSeveral 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. Filling optional whitespaceConditional 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: imgWhen 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: The value of the attributes can be changed via a script; see Attributes. Adding imagesImported or external imagesIn 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. For information about referring to images in HTML or in a script, see Resources. Via drag-and-dropThe drag-and-drop method is a quick way to import one or more images into a template.
Via the Select Image dialogTo either import an image into a template or use an external image in a template, the Select Image dialog can be used:
Using one file that contains a collection of imagesWhen 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. Moving an imageAn 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. Styling an imageImages 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. 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. It is recommended to resize images outside of the Designer, with image editing software. If necessary, it is possible to resize images automatically via a script in a Workflow process, as explained in a how-to: How to resize images via a script. Setting an alternate textOnce 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 imageCSS 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. 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.
|
|