Image Gallery

Image Gallery displays an ordered collection of images with captions in a clean, structured layout.

Definition

The Gallery template in Columbia Sites is designed to showcase a collection of images with accompanying captions in a structured, pre-formatted layout. Captions appear as overlays when users hover over each image, providing context or descriptions.

NOTE: this is not to be confused with adding images for the Research model image gallery

Specifications & Usage

Availability:

The Gallery template is available exclusively on Columbia Sites utilizing the Administrative model

When to Use:

To display a curated collection of images related to research projects, events, or other thematic content.
When visual representation enhances the understanding or appeal of the content.
To provide users with an interactive experience through image hover effects.

Image Specifications:

All images should be optimized for web use at 72 dpi.
Ensure images do not exceed 2000 x 2000 pixels or 1MB in size.

How to create a Gallery

Go to: Shortcuts > Add Content > Gallery

Enter a Title for the Gallery

This title is used to identify the gallery when embedding it later.
Note: The title does not display on the page where the gallery is embedded.

[Optional] Add a Cover Image

If a cover image is uploaded, you can choose to display it as a single preview when embedding the gallery.
If no cover image is added, the first gallery image will be used as the default when selecting “Cover Image” view.

Add Images and Captions

Upload new images or select existing ones from the media library.
[Optional] Add a caption for each image. Captions appear as hover overlays.
To add more images, click Add Gallery Image.
Reorder images using the drag-and-drop handle (three blue dots).

Click Save

Your gallery is now created and ready to embed.

Steps to Embed

On Basic, Landing, Profile and Event pages:

Select "Gallery" from the content dropdown
- For Landing Pages, first add a Page Section, then select "Gallery" from the slice options.

[Optional] Add a Display Title

This title renders above the embedded gallery.

Choose a View Mode: Tile View or Cover Image

Tile View: All images display as tiles in a grid layout.
Cover Image View: Displays only the cover image with an image count below.
- If no cover image was uploaded, the first image is used.

Embed the Gallery by Title

Begin typing the title of the gallery you created.
A list of matching galleries will appear—select the correct one.