Define a Media Player and Playlist

The Gallery template group is specially designed to support the display of a combined media player and playlist on publication pages. The playlist offers a list of videos or other media items that can be played in the media player. Selecting an item from the list causes it to start playing in the media player. The media player and playlist are displayed together on the same page, and playing a media item does not require the display of a new page or pop-up window.

In order to support this functionality, the Gallery group is allowed to contain a Data Source component. (In general, Data Source components are not allowed in templates, so this is a special case.) The way it works is this:

  • The Gallery group has a Data Source area, into which you can drop a Data Source component (the same way you add widgets to a template).

  • The Data Source component is set up with queries to select the media items you want to appear in the playlist.

  • The Gallery group also has a View area, to which you can add a Media widget and some Teaser and/or View Picker widgets. You need to include at least one Teaser/View Picker widget to display the playlist. You will often, however, want to include at least one more Teaser/View Picker widget in order to provide a summary for the currently selected media item, as in the example shown below.

  • Both the playlist and the summary widgets must be set up to get their content from the Gallery's Data Source.

  • The playlist and summary widgets can then be configured in the usual way to provide the required views of the content items provided by the Data Source.

Here is an example of a media player, summary and playlist displayed in a publication:

Here is the template group structure required to produce the above combination:


The specific settings required to achieve this kind of result are:

  • The Data Source must be configured in the usual way to return a sequence of media items suitable for playback by the media player.

  • The Data Source must be dropped in the Gallery's Data Source area. You can use this area's options (see Data Source Options) to limit how many (and which) of the Data Source's media items are actually made available to the Gallery's widgets. You could for example, set the Data Source area Maximum items options to 6. Only a maximum of 6 items will then be displayed in the playlist, even if the Data Source returns many more.

  • The Media and Teaser widgets can be arranged on the page using Column and Row groups in any way you like.

  • You can use either Teaser widgets or View Picker widgets + Teaser Views for the playlist and summary views. Teasers are the simplest option, while a View Picker plus Teaser Views offers more flexibility (see Configuring View Pickers and Teaser Views for details).

  • Whichever widget type you use, both the playlist and the summary widget must be configured to use the Gallery's data source. You do this by setting the Use option (on the Teaser and View Picker's Data Source tab) to Template Data Source.

  • Both the Link settings / Link behaviour option and the Media settings / Media play mode option on the playlist widget's Advanced tab must be set to Select from gallery.

  • You will also need to add a CSS class name to your summary view widget's Widget wrapper settings / Style Class field (on the Advanced tab), which should be supplied to you by a template developer. If you want to know more about this, see Control Content Visibility in a Gallery Group in the Developer Guide.

  • Otherwise, the playlist and summary view widgets can be configured in the usual way to include whatever elements you require.