Media

Gallery

A media gallery is a collection of images, videos or audio files that allows a user to browse media related to the page content. The media gallery can include multiple formats.

Do's

  • always include thumbnails
  • always include ALT tag
  • write captions that are short, distinct and indicative and communicate the subject of the media content that is linked
  • select appropriate images for media thumbnails, they need to depict what is in the audio or video file
  • select matching icon overlays to indicate the type of media, i.e. audio icon, video icon

Don'ts

  • don't automatically play audio or video files when a user arrives on a page (or scrolls to a media gallery)
  • don't automatically play next items after an audio or video item finished
  • don't choose images which are too complex to be distinguished in thumbnail size

When to use

  • where there are several media files - if there are under 5 items, use an unordered list or a media container
  • where there is no need to prioritise or highlight specific media files, i.e. files are equally important in terms of content

When not to use

  • do not use the gallery when media items have a content hierarchy
  • do not use the gallery when specific items should be highlighted

Overlay

The media gallery overlay component represents the interaction interface. It is complementary to the gallery component. Through the component users can view, download and share items present in the media gallery. All information displayed in this component is pulled directly from the gallery component and therefore offers no interaction through the CMS.

Gallery rules apply here for dos, don'ts, what to use and when not to use.