Skip to main content

Media Selector

What is the Form Media Selector?​

The Media Selector lets the user browse through a set of images and videos and pick one. The currently shown media item is the field's value. It supports two display styles and can pull its media from explicitly selected files, an entire folder, or a connected datasource.

Note

The Media Selector was previously called the Image Selector. Older widgets created as an image selector keep working and are rendered by this same type.

media-default.png

Options​

Widget type​

Specifies the display style of the media selector. Also changes how the selector looks. Possible values:

  • Default: A single large display with previous/next arrows and an optional thumbnail navigation strip.
  • Carousel: A carousel-style gallery.

Default: Default

Select images​

Pick one or more images to show in the selector.

Select videos​

Pick one or more videos to show in the selector. Images and videos can be combined in the same selector.

Video volume​

The playback volume for videos, in percent. A value of 0 mutes the videos. Range: 0 - 100. Default: 100

Embed video only when selected​

When enabled, a video element is only mounted for the currently shown slide instead of all slides at once. Useful for performance when there are many videos. Default: Disabled

Animation style​

The transition used when switching between media items.

  • Slide: The media slides horizontally.
  • Fade: The media fades in and out.

Default: Slide

Icon placement​

The vertical placement of the previous/next navigation arrows. Possible values: Top, Center, Bottom. Default: Center

Auto slide​

When enabled, the selector automatically advances through the media. Images advance after the configured slide duration; videos advance when they finish playing. Auto slide only runs when there is more than one media item. Default: Disabled

Slide duration (seconds)​

Visible when Auto slide is enabled. How long each image is shown before advancing. Range: 3 - 15. Default: 3

Pause on interaction​

Visible when Auto slide is enabled. When enabled, auto slide pauses while the user interacts and resumes after a period of inactivity. Default: Disabled

Resume after inactivity (seconds)​

Visible when Pause on interaction is enabled. How long to wait after the last interaction before auto slide resumes. Range: 3 - 60. Default: 5

Enable folder​

When enabled, the selector loads all images and videos from a chosen folder instead of (or in addition to) individually picked files. Default: Disabled

Media folder​

Visible when Enable folder is enabled. The folder whose images and videos are loaded into the selector.

Show navigation bar​

Default widget type only. Shows the thumbnail navigation strip below the main display, letting the user jump to any item. Default: Enabled

Media fit​

Default widget type only. Controls how each media item is scaled to fit the display (for example cover, contain, or fill). Default: 100% 100%

Accent color​

The accent color used by the selector (for example the active indicator). Default: #00a5fe

Background color​

The background color behind the media. Leave empty for no background. Default: (empty)

An optional custom image used for the previous/next arrows. When empty, the built-in arrow icons are used.

Navigation icon size (%)​

The size of the navigation icons, in percent. Range: 5 - 30. Default: 12

Setting Mock Field and Own Value​

The media selector writes the URL of the currently shown media item to its own value and tries to write it to the mock field. This happens when:

  • The selector is loaded (the first item, or the item matching a stored initial value, is shown).
  • Another media item is shown (by arrow, swipe, thumbnail click, auto slide, or external command).
  • An external message tells it to change value.

The value is only written on a live displayer, not in the editor.

Validation​

The media selector does not validate the selection.

Sensor Events​

On every change, the selector emits a sensor event named after the form, carrying the URL of the currently shown media item:

{FORM-NAME} value: [media URL]

External Messages​

The media selector listens to the three basic external messages:

  • Set Form: Takes the value from the message, splits it by ; (semicolons) into a list of URLs (each detected as image or video by its extension), replaces the media, and shows the first item. Updates the Mock and own value. If the value is not a string, the media is cleared.
  • Clear Form / Reset Form: Reloads the media from the configured settings/folder and shows the first item. Updates the mock and own value.

It also listens to its own navigation messages:

  • Show next media (showNextMedia): Shows the next item.
  • Show previous media (showPreviousMedia): Shows the previous item.
  • Show specified media (showSpecifiedMedia): Shows the item at the given index parameter.

Value from Datasource​

The media selector appends media from a connected datasource to the selected/folder media:

  • An array of URL strings is added directly (each detected as image or video by extension).
  • An array of objects is read via each object's image.location property; duplicates (by URL) are skipped.
Last updated on