Image

Element type: Dictionary

Displays an image at a given URL. It supports differents images for Light or Dark mode if you which to change images.

Keys

Name	Type	Possible values	Required
Type	String	Image	Required
URL	String	-	Required if no mode URL keys are specified.
LightModeURL	String	-	Required if DarkModeURL is specified.
DarkModeURL	String	-	Required if LightModeURL is specified.
ShouldFillSpace	Boolean	-
Height	Number	-
Margins	Dictionary (Margins)	-
Border	Dictionary (Border)	-
Condition PRO	Dictionary (Condition)	-

Detail

Type Required

Type: String
Explanation: The type of the component which has to be Image.

URL

Type: String
Explanation: The URL of the image to display. Can be local or online. Required if no mode URL keys are specified.

LightModeURL

Type: String
Explanation: If you want to propose a different image depending on the mode, you can specify here the image URL for the light mode. Required if DarkModeURL is specified

DarkModeURL

Type: String
Explanation: If you want to propose a different image depending on the mode, you can specify here the image URL for the dark mode. Required if LightModeURL is specified

ShouldFillSpace

Type: String
Default: false
Explanation: If set to true, the image will take all the available space in the container, while keeping its ratio, and it will stop when the maximum width or height is reached. Then, you can change the size of the window to leave no space surrounding the image. Useful when displaying only on image component in a container for example.

Height

Type: Number
Explanation: The height of the image component. The width is fixed as the available space within the container. The image will fill the overall available width or height, depending of which one is the smallest, to keep its dimensions.

info

Is ignored if ShouldFillSpace is set to true.
If no Height and no ShouldFillSpace keys are specified, the maximum height is 200.

Margins

Type: Dictionary (Margins)
Explanation: Add padding to the component's sides.

Border

Type: Dictionary (Border)
Explanation: Add a top or bottom border to a component.

Condition PRO

Type: Dictionary (Condition)
Explanation: Allows to hide or show the component using a boolean expression.

Example

The following displays an image using an online URL.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
			<key>Containers</key>
			<array>
				<dict>
					<key>Components</key>
					<array>
						<dict>
							<key>Type</key>
							<string>Image</string>
							<key>URL</key>
							<string>https://www.amaris.com/wp-content/uploads/2019/03/logo-amaris-consulting.png</string>
						</dict>
					</array>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>

Image with a variable myImages in its local URL. Note the usage of the myImages variable.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
			<key>Containers</key>
			<array>
				<dict>
					<key>Components</key>
					<array>
						<dict>
							<key>Type</key>
							<string>Image</string>
							<key>URL</key>
							<string>${myImages}/CompanyLogo.png</string>
						</dict>
					</array>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>

Image with different URLs depending on the mode.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
			<key>Containers</key>
			<array>
				<dict>
					<key>Components</key>
					<array>
						<dict>
							<key>Type</key>
							<string>Image</string>
							<key>DarkModeURL</key>
							<string>${Resources}/Images/AmarisLogo_White.png</string>
							<key>LightModeURL</key>
							<string>${Resources}/Images/AmarisLogo_Black.png</string>
							<key>ShouldFillSpace</key>
							<true/>
						</dict>
					</array>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>