Multimedia Filter Container component

create a gallery of automatically added images and videos

  • add multiple source paths for images/videos
  • add include tags
  • add exclude tags

The Multimedia Filter Container component allows you to display multiple image an videos as a gallery on your pages, by adding these images and videos automatically. Once you have provided a source path all images and videos will be taken from there. Additionally you can then add include and exclude tags to filter the results from that path. There are 3 different gallery styles: Slider, Grid and Pinterest. The gallery can be a mix of both videos and images at once.

on this page:
CMS settings , Opens In New Window Front-end examples , Opens In New Window
Step by step , Opens In New Window

Introduction

The Multimedia Filter Container component lets you automatically add videos and images in a gallery on your pages. The images and videos are taken from source paths and can then be filtered with including or excluding tags. The gallery is available in 3 different styles: Slider, Grid and Pinterest. The content of one gallery can be a mix of images and videos.

Glossary:

Example:

Multimedia Filter Container component

CMS settings

 

All Multimedia components, including Multimedia Filter Container, can be found in the
GEM Multimedia Menu in the Sidekick.

tab: General

tab: Source

tab: Labels

Editorial hint:

BB Codes  

Since there is no Rich Text Editor for writing the textual content of the component, it is helpful to use BB Codes for styling. You can insert a line break or simply make some text bold, italic or red.

tab: Spacing

In Order to filter the gallery with tags, you have to tag all images and videos in the DAM, that you want to use. Further more if you want to have a headline and description for the image or video you have to define them in the DAM for each image/video.

First you have to navigate to the image/video in the DAM, that you want to edit. Then you double click on the image/video.

 

Now you can add a title, description, tags and copyright information to the iamge/video. Don't forget to click 'Save' in the bottom right corner, afterwards.

 

Editorial hint:

HTML Entity Codes  

If you want to create special characters or specify if and where a line break should occur, use HTML Entity Codes. They can be used to create a copyright ©, registered/original ® or trademark ™ sign.

Front-end examples

Gallery Style = Slider

Multimedia Filter Container component

Gallery Style = Slider | Display Social Shares checked

Multimedia Filter Container component

Gallery Style = Slider | Display Copyright checked

Multimedia Filter Container component

Gallery Style = Slider | Display Item Number checked

Multimedia Filter Container component

Gallery Style = Grid

Multimedia Filter Container component

Gallery Style = Grid | Display Social Shares checked

Multimedia Filter Container component

Gallery Style = Grid | Display Copyright checked

Multimedia Filter Container component

Gallery Style = Grid | Display Item Number checked

Multimedia Filter Container component

Gallery Style = Pinterest

Multimedia Filter Container component

Gallery Style = Pinterest | Display Social Shares checked

Multimedia Filter Container component

Gallery Style = Pinterest | Display Copyright checked

Multimedia Filter Container component

Gallery Style = Pinterest | Display Item Number checked

Multimedia Filter Container component

Filter Tags

Images are tagged with: Multimedia, Image

Videos are tagged with: Multimedia, Video

Source Filter Tags = Video

Multimedia Filter Container component

Source Filter Tags = Multimedia AND Image

Multimedia Filter Container component

Source Filter Tags = Multimedia OR Image

Multimedia Filter Container component

Source Filter Tags = Multimedia | Exclude Filter Tags = Video

Multimedia Filter Container component

Step by step

1

2

3

4

5

6

Related topics

Used recurring elements