Build image components

To display images on invoices, add image components to cells.

note

You can create more than one active version of an invoice template per locale, and use conditional expressions to determine which fields appear on a version of an invoice template. You can only use conditional expressions in templates that you create or that you copy from a marketplace-provided default template. You cannot add conditional expressions to marketplace default templates. For more information, see Create conditional expressions.

Prerequisites

You can add image components to cell components. For more information, see Build cell components.

To populate the required source property in image components, you can upload an image and acquire an image URL for it. For more information on uploading images and acquiring an image url, see Manage images.

Default template JSON sample

In the Appdirect Template_EN_US default template, see lines 62-65.

To download the default template

📝 Note: If the AppDirect logo appears in the upper-left corner of the page, when Manage > Marketplace appears in this topic, click the grid icon > Switch to | Store, instead.

1. Go to Manage > Marketplace > Settings > Invoice templates > Appdirect Template_EN_US | Gear icon | Download JSON.

Image component JSON schema

{
  "type": "image",
  "properties": {
    "visible" : "true",
    "src": "http://path-2-img"
  },
  "style": {
    "height": "100px",
    "width": "200px"
  }
}

Elements to populate image components

Element			Type	Description
image			object	Defines styles, behaviors, and content, for image components. The images appear on invoices.
	type		string	Required. Defines the component as type image. Valid value: image
	properties		object	Required. Defines the source for an image and component visibility.
		visible	boolean	Required. Defines whether component appears on invoices. Valid values: true | false
		src	string	Required. URL for image source. To acquire a URL for an image that you store on the AppDirect platform, see Manage images. When null, invoices display no image. When {{Invoice Logo}}, invoices display the logo that you configure at Manage > Marketplace > Settings > Invoice settings. For more information, see Configure invoice headers and content. Preview the template to validate that the automatically-resized logo image displays appropriately in this template. Format: https://* | \{\{Invoice Logo\}\}| null
	style		object	Required. Defines formatting for the image. When you populate height and width, the image appears on the invoice with those dimensions. When you populate only height or width, the image dimensions adjust to maintain its aspect ratio. Valid values: HTML element names and CSS styles for the named HTML element. All HTML styles. Only relevant styles that the Invoice Builder can render appear in the user interface preview and the PDF.
		height	string	Image height in pixels, ems, millimeters, points, or inches. Format:[0-9]+(px|em|mm|pt|in) Example: 34px
		width	string	Image width in pixels, ems, millimeters, points, or inches. Format: [0-9]+(px|em|mm|pt|in) Example: 34px