Multimedia components

Images

Images will resize according to the grid in which they are used.

Grid:
This component can be added to all grids.

Template:
/sitecore/templates/Project/Common/Content Types/Media/Image

Note:
The source file of an image can be a hires file since Sitecore generates responsive images automatically depending on the device used for viewing the site. Do not include hires images in the Rich Text Editor since Sitecore's responsive image generator does not support this component.

Showcase image gallery

How to use it

You can add the Showcase Gallery component to every page on the site, it can only be added to a 100-grid and our advise is to make sure that it's shown on the full width of the page.

To keep it flexible, we've decided to add a multi-list select box to this component, in which you can select the Slide items that you want to display in the Showcase Gallery.

You can only add slide items in the content editor, this is not possible via the Experience Editor. You can manage the Slides within a Showcase Gallery from both the Experience Editor and the Content Editor. You can have as many Slides as you want. The Gallery will loop, so when you hit e.g. slide 10 of 10, you get the first image when you click next. Same goes for backwards navigation.

The Slide items consist of:

Title
Image
Summary

Grid:
This component can be added to the 100% (full width) grid.

Templates:
/sitecore/templates/Project/Common/Content Types/Teasers/Showcase Gallery

/sitecore/templates/Project/Common/Content Types/Teasers/Slide

Remarks

All images can be used, but we strongly advice to add images with a 16:9 ratio. If you add smaller images, these will show in full and will be centered on the page, but it's hard to see them in the preview.

At the moment, the multi-list will only show children of the Showcase Gallery item, that inherit from the Slide template.

Streaming Video

This component consist of:

Title
Video image: This image is shown as background to the title and play button. When no image is uploaded, the video player's standard behavior applies.
Video ID: the unique YouTube ID (e.g. nMgHj-ggVBY)

Grid:
This component can be added to the 100% (full width) and 50-50% grid.

Template:
/sitecore/templates/Project/Common/Content Types/Media/Streaming Video

Header Video (autoplay)

This component is only suitable for embedding Vimeo* videos and consists of:

Title
Video image: This image is shown as background to the title and play button. When no image is uploaded, the video player's standard behavior applies. The dimensions of this image are 1920 x 775 pixels
Video URL: the Vimeo link - e.g. https://vimeo.com/545836684

Grid:
This component can be added to the 100% (full width) grid.

Template:
/sitecore/templates/Project/Common/Content Types/Header/Header Video

Remarks

Keep the text (title, subtitle, text) short, more text will block the video. Double-check the controls on Vimeo and preview the component on the page before publishing the component. The component won't be working in the Experience Editor itself, but can be previewed in the preview mode of the Experience Editor in Sitecore before publishing.

Usual video dimensions are 1920 x 1080 pixels. Please note that a row of 150 pixels on the top and 150 pixels on the bottom of this video will not be visible in this placeholder.

These videos are played in a loop. So do not use a logo at the end of the video.

*Vimeo

We use Vimeo as Video Integration Service.

Privacy friendly video

Vimeo supports privacy friendly videos, these are GDPR friendly and can be placed on the website without any tracking involved. This way videos can play without any cookies needing to be accepted. The setting can be enabled with the dnt=true parameter.

Background video

We enable the background=true parameter, which includes multiple settings to play the video in a "clean" way, without any default Vimeo controls or buttons. The video will also be auto-played, looped and muted.

Media Cards

Media Cards can be added to the Media Library or Related Media components. These items can include a hires image file or a .pdf document. In the content editor you have to complete the following fields for an image card:

Title
Description (optional)
Image: select the hires file for images or a thumbnail image for documents
Attachment: select the .pdf file if you want to offer a document download option
Tags: select the keywords to be used for filtered search
Highlight checkbox: a checkbox to control whether a media card should be highlighted (enlarged) on the top of the image library.

Remark:
You have to create / edit / delete Media Cards in the Content Editor. From the Experience Editor, it's not possible to change these items.

Datasource Location:
Media Cards can be created in and selected from the following folders:
Global: /sitecore/content/Global/Global Media/Global Media Card Folder
Sitewide: /sitecore/content/Sitewide/Sitewide Media/Sitewide Media Card Folder

Template:
/sitecore/templates/Project/Common/Content Types/Media/Media Card