Author	Christopher Krämmer
Technical Contacts	Christopher Krämmer, Robin Heß
Version	2.3
Date	November 2024

Content

Overview

The gallery provides various functionalities. They can be configured and affect the following sections:

Gallery title
Overview icons
Overview text
Time line filter
Duplicate filter
Media grid
Lightbox
Sharing
Network request

However, each functionality can only be used when the information is provided. Furthermore, it must be clear where the information is located inside the data.

To configure the gallery and adapt it to different data sources, the gallery configuration file is used.

Examples:

Gallery Vocabulary

To ensure that the gallery is compatible with a wide variety of data sources, it has been constructed upon the following vocabulary, which can be mapped to (see section mapping).

All gallery keys are optional, but there are some keys that are dependent on each other. If the data does not contain certain information and the key pair (data key: gallery key) is not set in the mapping file, the corresponding functionality will not be enabled in the gallery.

Gallery vocabulary	Usage	Note
title	Gallery title	Headline that should appear on top of the gallery.
citation	Overview text	Used to extract the author names.
piName	Overview text	Name of the principal investigator.
zValue	Overview text	For definition, see O2A specification for GeoCSV (.sdi.csv).
zType	Overview text	For definition, see O2A specification for GeoCSV (.sdi.csv).
dateTime	Overview text, Time line filter, Sharing, Duplicate filter, Network request	For definition, see O2A specification for GeoCSV (.sdi.csv). Used as the first argument to sort items in the network request.
coordinates	Overview text	For definition, see O2A specification for GeoCSV (.sdi.csv).
image-average-color	Time line filter	Definition () : Key and values are based on iFDO vocabulary. For further information and definition, see: marine-imaging.com.
image-acquisition	Overview icons	Definition (*), uses mimeType as fallback.
image-marine-zone	Overview icons	Definition (*)
image-deployment	Overview icons	Definition (*)
image-navigation	Overview icons	Definition (*)
image-illumination	Overview icons	Definition (*)
image-scale-reference	Overview icons	Definition (*)
image-quality	Overview icons	Definition (*)
image-pixel-magnitude	Overview icons	Definition (*)
image-spectral-resolution	Overview icons	Definition (*)
image-capture-mode	Overview icons	Definition (*)
image-license	Overview icons	Definition (*)
pid	Sharing, Duplicate filter	Media identifier used for the sharing feature in the media gallery.
name	Sharing, Duplicate filter, Network request	File name of the source media file. Used as the second argument to sort items in the network request.
mimeType	Media grid, Lightbox	The MIME-Type used to distinguish between media in the gallery. It is based on the source media, not the web preview file (e.g, video/mp4). Consequently, it starts with 'image' or 'video' (e.g., image/jpg, video/octet-stream). Capitalization does not matter. If not available, auto guessing based on acquisition - if defined, else based on presence of photo_src and video_src.
photoSrc	Media grid, Lightbox	URL to the web version of the photo file. Fallback if scrset is not given or not supported by the browser. It is required to define photoWidth and photoHeight when using photoSrc.
photoSrcset	Media grid, Lightbox	HTML5 img srcset attribute. Recommended to use width descriptor. It is required to define photoWidth and photoHeight when using photoSrcset.
videoSrc	Media grid, Lightbox	String or list with strings containing URLs to media representations. For streams, it is recommended to provide a list of stream sources, where each list item is a fallback if the previous item was not supported in the browser. Example: [ url_dash, url_hls, url_mp4 ] If the URLs are separated in the data source, it is possible to map with the following syntax: Example 2: { "viewer.media.dash": "video_src.1", "viewer.media.video": "video_src[0]"} It is required to define videoWidth and videoHeight when using videoSrc.
photoWidth	Media grid, Lightbox	Largest width of photo proxy. Observe: if an orientation parameter is present in the exif metadata of a proxy, it will not be considered. Consequently, photo_width must be larger than photo_height to show a proxy in landscape mode.
photoHeight	Media grid, Lightbox	Largest height of photo proxy. Observe: if an orientation parameter is present in the exif metadata of a proxy, it will not be considered. Consequently, photo_width must be smaller than photo_height to show a proxy in portrait mode.
videoWidth	Media grid, Lightbox	Largest width of video proxy (same orientation as proxy).
videoHeight	Media grid, Lightbox	Largest height of video proxy (same orientation as proxy).
thumbnailSrc	Media grid, Lightbox	URL to the webvtt file. Thumbnails are shown when pointer hovers over video player seek bar.
coverSrc	Media grid, Lightbox	URL to the video cover.
coverSrcset	Media grid, Lightbox	HTML5 img srcset attribute. Recommended to use width descriptor.
duration	Media grid	Video duration in human readable format, i.e., 00:16:45. Shown as overlay on video cover.

Gallery Configuration File

For better human readability, the gallery configuration file is structured into several parts.

General Information

Key	Value	Note
version	<version number of the gallery configuration>	It is recommended to update the gallery configurations to the latest version.
information	<free text area>	Anything that might be important, i.e., for the editor. Is not read or used programmatically.

Overwrite

Some gallery functionalities require certain information to work. If these information are not included in the dataset or if they should be replaced, they can be specified here.

Note: Only affects the gallery configuration, this does not change any information in the sidebar.

Key	Child key	Value	Note
<key based on vocabulary>	replacement	<new value>	Value used to replace a dataset value based on a regular expression.
	pattern	<regex pattern>	Pattern of the regular expression. If it matches, the dataset value is being replaced. Examples: pattern \| comment -----------------------\|-------------------------------- "^$" \| Matches an empty string "^0$" \| Matches 0 "^(?:undefined\|null)$" \| Matches undefined and null

Filters

In order to reduce the amount of data inside the gallery, some filters have been developed that can be configured in this section.

Key	Child key	Value	Note
duplicateFilter			Removes duplicates based on a persistent identifier (pid). If the "pid" is not given inside the data, the pid is set based on the file "name". If this information is also not provided, a pid is computed based on "date" and "geometry".
	enable	"true" or "false"
timeLineFilter			Plot-based timeline filter. If "image-average-color" is specified, the lines representing the image itself are colored according to their values.
	enable	"true" or "false"

In this section, configurations can be made that affect the lightbox.

Key

Child key

Value

Note

shareButton

Indicates if the share button should be visible or not, thus if the user should be able to access and use the sharing feature inside the lightbox.

enable

"true" or "false"

Mapping

The mapping section allows diverse data structures to be mapped to predefined gallery vocabulary. Thereby data keys, i.e., column names of data layers, are mapped to gallery keys.

The structure of the mapping section is identical to the structure of the input data. Each gallery vocabulary key is mapped by assigning it as a value to the (nested) data key.

Consequently, the mapping section describes where to find the information in the source data.

Data structure

"properties": {
			"event": "MSM96/2"
		}

Mapping structure

"mapping": {
		"properties": {
			"event": "title"
		}
}

O2A Media Layer - Gallery Configuration