Choose a Media Gallery to Display Your Work

With Spotlight, you can choose from a variety of layouts and styling options to display your work. A gallery is the media container that displays your videos, images, or other files. The type of gallery you choose determines how your audience sees and interacts with your work.

In this article, we will review the different gallery options available to you, including:

• How to Add a Gallery to Your Page
• Gallery Types
• Gallery Styles
• Additional Gallery Settings

The 720p proxy that was created for the asset will be the version played in the spotlight. Note that sharing files in a Review Link provides viewers with an additional option: the ability to select different resolution proxies based on their bandwidth.

 

How to Add a Gallery to Your Page

To add a gallery to your page, open the Elements panel by clicking the plus icon along the left side of the page. In the Media section, you will find four different gallery types: Grid, Carousel, Stack, and List. To add a gallery, click on the icon, or drag and drop the icon directly onto your page. Once you add a gallery, you can click and drag its borders to adjust its size.

Add a grid to your page.

Apply your content to the gallery by opening the Playlists panel and dragging one of your playlists onto the gallery. For more information on playlists, please see our article Create and Share Playlists.

Apply your playlist to a gallery.

Gallery Types

To preview your different gallery options, select your gallery, and then open the properties panel on the right side of the page. Under Gallery Settings, you will see icons for each type of gallery:

• Stack

• Grid

• List

• Carousel

Click these icons to see how a gallery will display your playlist.

Change your gallery type via the properties panel.

Grid

Selecting this gallery type will display the contents of your playlist in a grid. This format lends itself to sharing a large collection of images. By adjusting the width and height of the grid, you can change the number of items displayed in the rows and columns.

Gallery Type: Grid

If all your playlist items do not fit within the width and height you have selected, then your audience can scroll down the gallery to view the rest of the items in your playlist.

Carousel

The carousel gallery displays your playlist items in a single row. Click the arrow buttons on the left and right sides of the carousel to navigate backward and forward through the playlist.

Gallery Type: Carousel

You can control the number of items displayed in the carousel at once and the number of items by which to scroll. In your Gallery Settings, In View controls the total number of assets visible at once; Scroll controls how many assets advance when a viewer clicks the arrows.

Stack

A stack gallery arranges your playlist items in a variety of different dimensions.

Gallery Type: Stack

If all your playlist items do not fit within the width and height you have selected, then your audience can scroll down to view the rest of the items.

List

A list gallery offers a compact view of your content. Thumbnail images appear along the left side of the gallery, followed by the asset title and the file size.

You can adjust the appearance of your list in the properties panel. Under Thumbnails, adjust the width of your thumbnails, or set the width to “0” to hide thumbnails and display a text-only list. Reduce the height to bring your rows closer together.

Gallery Type: List

Show Folders

If your playlist contains folders, click the “Show Folders” checkbox in the properties panel to display them.

Click the “Show Folders” checkbox.

In this example, you can send a “locations” playlist that contains folders for each location. Your audience can click on a folder to browse the assets and subfolders it contains. They can navigate backward by clicking the folder icon, which says “Back.”

Navigate back to the root folder.

To change the color of your folder icons, click the color swatch next to the word “Folder” under Folder Settings.

Note that folders are supported in Grid and List galleries. The “Show Folders” checkbox is not available for Stack or Carousel galleries.

Gallery Styles

Once you select a gallery type, you can also choose from five different styling options listed in the properties panel. These options appear under Gallery Settings, next to the word Tile.

Select a gallery style from the properties panel.

Style 1

The gallery does not display any text, and a dark overlay appears when you hover over a thumbnail.

Style 1

Style 2

When you hover over a thumbnail, a “View” button is displayed on a dark overlay.

Style 2

Style 3

When you hover over a thumbnail, the asset title and asset description appear on a dark overlay. These are the same title and description that appear when you view the asset in your MediaSilo project.

Style 3

Style 4

A caption displays the asset title and asset description. A “View” button appears on a dark overlay when you hover over a thumbnail.

Style 4

Style 5

A caption displays the asset description only. A “View” button appears on a dark overlay when you hover over a thumbnail.

Style 5

Additional Gallery Settings

To increase the space between your gallery thumbnails, you can increase the Margin that appears under Gallery Settings. You can also increase the Radius to give your thumbnails rounded corners.

Radius: 0, Margin: 1

Radius: 10, Margin: 5