As a form should usually reflect the company style, adding images is an essential feature. You can add images from the internet or upload your own. Uploaded images will be archived in the iText DITO template package after creation of the template. The most popular use case for adding images is the inclusion of a company logo.

To insert an image, click the image icon in the toolbox. The image will be inserted as a separate element in the template.

The image will show as a placeholder in the canvas. If you connect a resource to the image, the placeholder will be replaced with the actual image.

Insert Images from the web

To insert an image that is located on the web, select the image placeholder in the canvas or the image element in the template elements tree. In the base properties, specify the source of the image.

Images that are inserted as a link will not be included as a resource in the template package. Make sure that the referenced URL remains valid and accessible at all times.

Insert Images from the Resources Panel

Alternatively, you can link an image from the template package's resources. In the resource panel to the left of the editing canvas you can upload images which are stored locally. Click the upload icon and select a fie from your local system.

Make sure that the name of the file you upload is shorter than 200 characters and does not contain spaces or special characters.

after uploading the resource, you can link it to an image place holder in the canvas by clicking the link icon.

The placeholder for the image in the canvas will now be replaced with the actual image.

Note that if you link images from the resources panel, the image files will be embedded in the resulting documents. This might be important for compliance reasons.

Insert Images from the Data Sample

You can also dynamically insert images from the data sample related to the template package. You can bind the image element to a field in the data sample that holds either a link to an image file (URL) or an binary encoded version of the image.

To bind the element to a field in the data set, link the field that holds the image (link) as a value in the Data panel of the image properties.

To bind a field that holds a link to an image, select Uri from data. To bind a field that contains a binary encoded version of the actual image, select Content from data.

Image Properties

Base Properties

This set of properties allow you to set the following configurations:

  • The source of the image (either a resource or a URL)
  • A hyperlink on the image (either a web link or an anchor, either a static or a dynamic value)
  • An anchor ID (to be able to link to this image from other places in the template)
  • A style that should be applied to layout the image

Data Properties

This set of properties allow you to set:

  • A name for the image element
  • A data bind to link the image placeholder to a data field
  • A minimum and maximum number of repetitions

Accessibility Properties

This set of properties allow you to set:

  • An alternative description for the image.
  • An alternative description for a hyperlink placed on the image

Paragraph Style Properties

This set of properties allow you to set alignment, indent and line height of the image.

Layout Properties

This set of properties allow you to set:

  • Width and height of the image (supported units)
  • Margin and padding preferences

Border Style Properties

This set of properties allows you to set borders for the image.

Supported Image Formats

The supported image formats are:

  • bmp
  • ccitt
  • gif
  • jpg
  • jpg2000
  • png
  • svg (with some limitations)
  • wmf

Not all of these formats are supported in PDF, but iText DITO will convert them to image types that are defined in the PDF specification.