|
|||
ImagesImages are a powerful ingredient in all of your templates. This topic explains how to add and use them. 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 Styling an image) and alternate text can be linked to it (see Setting an alternate text). 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. 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 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. Using images in an Email template? See Using images in email campaigns: tips.
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. 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-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. Styling an imageImages can be resized using the handles on the sides and the corners. They can be styled using the Format > Image menu item 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. 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 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.
|
|