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

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. You can find Gallery in the Media section. Click the icon, or drag and drop it onto your page. You can click and drag the borders of the gallery to adjust its size.

Add a gallery element 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 Shareable Playlists in Spotlight.

Apply your playlist to a gallery.

Gallery Types

By default, a new gallery will be a grid. To explore your gallery options, select your gallery, and then open the properties panel on the right side of the page. Under Gallery Settings, you will see Type, followed by a dropdown menu with four different gallery types:

  • Grid

  • Carousel

  • Stack

  • File Browser

Select a gallery type from 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 asset tiles visible at once; Scroll controls how many asset tiles advance when a user 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.

File Browser

The file browser is best suited for displaying a playlist that contains multiple folders and files. It is the only gallery type that displays folders. Use a file browser to send a "locations" folder that contains subfolders for each location.

To change the color of your folder icons, go to the Folder Settings section of the properties panel.

Gallery Type: File Browser

Your audience can click on a folder to browse the assets and subfolders it contains. They can navigate backward by clicking the folder icon in the top-left corner of the gallery, which says "Back."

Navigate back to the root folder.

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 Shift 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

Did this answer your question?