Media browser

Owned by Sofie Desombere
Last updated: 07 December 2021
2 min read

Algemeen

A Media Browser is used to group different media objects; the items are opened when clicked. It consists of an overview of different types of media: videos, photos or PDFs. It is used to collect various types of media. A small ‘preview’ of the media is shown by the use of thumbnails. When a thumbnail is clicked, you will see the media item in full screen. You can swipe from one media item to another by using the arrows.

There are specific controls for PDF files to scroll through the file, zoom in-out,…

Examples

Example 1: https://xd.adobe.com/view/2dca7ebd-048d-4319-9238-85c75a112c02-7899/?fullscreen

Example 2: https://xd.adobe.com/view/495d185b-8e57-451d-aedd-3c8521a216ac-1c0e/?fullscreen

General functionalities:

  • Delete a media browser module: the entire module is deleted

  • Duplicate a media browser module: the entire module, including all its contents, is duplicated

  • Cancel a media browser module: all changes that were made before saving can be cancelled by clicking the cancel button

The management of a media browser consists of several parts:

Basic

The basic information contains the following settings:

  • Module name: internal work name

  • Has introduction: determines whether a pop-up with extra information will initially be visible before the user can click on the various media items. The info can be set per language.

    • Title

    • Text

  • Has timer: determines whether a timer is visible on video/audio items. See example 2.

  • Background: add an image (.jpg or .png) or video (.mp4) in the back of your module

Assets

The blocks of linked media items are determined here. The following assets are possible:

  • jpg

  • png

  • gif

  • mp4

  • wav

  • pdf

The following settings are available for each item that you add:

 

  • Name: internal work name

  • Thumbnail: photo used in the menu overview
    Optimal resolution: 324px x 324px

  • Title: title shown on each media in the menu

  • Media: media item that opens in full screen after clicking in the menu overview
    Optimal resolution: depending on screen resolution 

The menu is filled according to a certain grid structure by default.