Image components are used for displaying static or dynamic images on a Screen.

Image Component


ImageImage OptionsProperties for controlling how the image scales, repeats, and aligns within the dimensions of the Component
BG ColorColorBackground color behind the selected image
BorderBorderBorder around the image
EnabledBooleanEnables or disables the item - only used to control when the Click event is active
VisibilityBooleanDetermines when to show or hide the Component
FlashBooleanCauses the Component to flash, drawing attention to it
ClickEventHandles a click event allowing you to use the image as a button

Image Options

Image Options

Fixed Media

Clicking on the image will set the static or default image to display in the Component. This will show the Media Browser allowing you to select or even upload a file to the server.

Read more about using the Media Browser


To speed up importing media, you can also drag an image from another browser window onto a Screen while in Edit Mode and the Media Browser will open for you to select where the image will be uploaded. Then after selecting the directory, a new Image Component will be added using that image.
NOTE: only users with Admin privileges can import new media or modify existing media.

Dynamic Media

Sometimes, its helpful to show a different image on the screen depending on real time OAS Tag values. Click the icon to assign OAS Tags to drive this logic.

Dynamic Image Options

To define different images to display in the component:

  1. Click the image icon above the OAS Tag field, and browse to select the image you want to display
  2. Use the Tag Browser to select a tag to monitor. Note: You may only select tags that can be interpreted as a Boolean value, such as true and false, or 0 and 1
  3. Click the "not equals" option if you would like the image to show when the tag is not true


The image displayed will follow cascading logic, allowing you to use multiple OAS Tags to determine which image is displayed.

Read more about how Cascading Values are evaluated

You can assign a Default image to be displayed if none of the tags are currently true. Likewise, a Bad Quality image can be specified if any of the associated Tags report back a "Bad Quality" indication.


Because a Component can be sized to be smaller or larger than the underlying image, you can add padding around the image that is relative to the outer bounds of the Component. Depending how you've chosen to size and align the image, the padding will display differently:

Image Padding

In the example above, the image is center-aligned both vertically and horizontally. If the original image is larger than the Component, no padding will be added. When you stretch the image, it fills all of the available space in the Component and in both dimensions, and the padding will be seen. When you scale the image, the original aspect ratio is retained, and the padding will be applied wherever the image dimension reaches the bounds for that dimension.


Image Alignment

Images can also be aligned within the Component bounds. In the example above all three instances are aligned both at the top and left . As you can see, when using the image original scale, if it is larger than the component, it will be aligned to the edge of the Component, and padding will affect the offset from the bounds. When you stretch the image, alignment has no effect. When you scale the image, alignment will only affect the dimension where there is additional room to adjust the image position.


Image Repeat

In some cases you may want to repeat an image. This is especially effective if the image is a seamless pattern. The example above illustrates the effect of repeating an image in both directions using all of the sizing options. Additionally, you can choose to only repeat the image horizontally or vertically .

Last Updated: