Photo Gallery and Media Slider widget settings

Photo Gallery shows many photos at once in a grid or mosaic. Media Slider shows one slide (or a few) at a time, with images or videos, text and buttons. Both are in the Media category of the Add panel.

Both fill their content from a Manage window: add items by hand or pull them from a collection. That window (reordering, alt text, focal point, buttons, links, collections, filter and sort) is explained once in Widget Design panel basics. Spacing and Animations & Effects are explained there and in Animations and effects.

Photo Gallery

How to add it

1. Click Add in the left rail, open Media and drag Photo Gallery onto the page.
2. Click Manage Photos on its toolbar.
3. Click Add Images and pick several photos at once from the image window.
4. Click a photo in the list to give it a Title, Description, Alt text, Focal point, a button (Show button, Button text, link) or Link this image.
5. Click Done.

Links or lightbox

At the bottom of Manage Photos:

• Enable links on gallery images off (the default): clicking a photo opens it full-screen in a lightbox, with previous and next arrows. The arrow keys and Esc work too.
• On: photos with a link open that link. The lightbox is turned off, and photos without a link do nothing when clicked.

Layout

• Layout: Grid (even rows) or Mosaic (photos keep their shape). Default Grid.
• Number of columns: 1–8. Default 4 on Desktop, 3 on Tablet, 2 on Mobile.
• Visible rows: All or 1–10. Default All. With a number, a View more button shows the rest.
• "View more" button text: shown when rows are limited. Default "View more".
• Text & button: Off, Below, On hover or Over. Default On hover. Shows each photo's title, description and button.
• Text & button position: a 3×3 grid for where the text sits on the photo. Only for On hover and Over. Default the middle.

Images

• Square images (Grid only): crops every photo to a square.
• Image height (Grid, not square): 40–800 px. Default 220 (160 on Mobile). Per screen size.
• Space between images: 0–60 px. Default 8. Per screen size.
• Corner radius: 0–60 px. Default 0.
• Display full image: shows the whole photo instead of cropping to fill. Default off.
• Shadow: a soft shadow under each photo. Default off.
• Image hover effect: None, Zoom in, Darken or Black & white to color. Default None.

Text

Only when Text & button isn't Off.

• Background: behind the text. Default white at 85%.
• Border: 0–12 px. Per screen size. Border color next to it.
• Caption padding: 0–60 px. Default 10. Per screen size.
• Title and Description: text style controls (font, size up to 48 and 32, color, bold, italic, alignment).

Buttons

• Image button style: Primary or Secondary (your theme's button styles). Default Primary.
• "View more" button style: Primary or Secondary. Default Secondary.

Frame

The box around the whole gallery.

• Background, Padding (0–80 px, per screen size), Border (0–12 px), Border color, Corner radius (0–48 px).

Spacing and Animations & Effects

Margin, plus Hover effects, Entrance and Scroll.

Connect to Data

More > Connect to Data > Connect Images to fills the gallery from an image-gallery field of the page's collection entry. Or choose From a collection in Manage Photos to make one photo per collection item. See Connect to Data.

Media Slider

How to add it

1. Open Add > Media and drag Media Slider onto the page. It starts with three sample slides.
2. Click Manage Slides.
3. Click Add Slides to pick several images at once, or select a slide and use Add image or Add video.
4. For each slide, set Title, Description, Alt text, Focal point, a button and Link this slide.
5. Click Done.

Video slides: Add video opens the same video window as the Video widget (Client videos, Upload, URL, Library). Video slides play silently on a loop like a background, pause when they're off screen, and don't flash their poster before the first frame (the poster is for visitors whose device asks for less motion, or whose browser blocks autoplay). YouTube and Vimeo slides wait for marketing cookies when the site has a cookie banner.

Layout

• Layout: Text over media or Media above text. Default Text over media.
• Slide width (Slide transition only): Equal or Natural (media width). Default Equal. Natural makes each slide as wide as its photo at the slider's height, for a flowing photo strip.
• Number of columns (Slide, Equal, Center mode off): 1–4 slides side by side. Default 1. Per screen size.
• Center mode (active slide in the middle) (Slide only): keeps the current slide in the middle, with its neighbors partly visible at the sides. Default off.
• Active slide width (Center mode with Equal): 30–100%. Default 70% (85% on Mobile). Per screen size.
• Side slides opacity (Center mode): 0–100%. Default 40%.
• Height (or Media height with Media above text): 120–1000 px. Default 410 (320 on Mobile). Per screen size.
• Title heading: H2, H3, H4 or Paragraph. Default H3.

Transition

• Slide transition: Fade or Slide. Default Slide. Slide also lets visitors swipe.
• Autoplay: moves on by itself. Default on.
• Slideshow speed (Autoplay): 1–20 seconds per slide. Default 7.
• Pause slideshow on hover (Autoplay): default off. Autoplay also pauses while a slide has keyboard focus, and never runs for visitors who ask their device for less motion.
• Content animation: how a slide's text comes in: None, Fade in, Fade in from bottom, Fade in from right or Zoom in. Default Fade in from bottom.
• Show arrows: default on.

Navigation Indicators

• Type: Bullets, Lines or None. Default Bullets.
• Display: Always or On hover. Default Always.
• Size: 4–24 px. Default 8.
• Color: default white.
• Space in-between: 0–32 px. Default 8.

Thumbnails

• Show thumbnail strip: small pictures of each slide under the slider; click one to jump to it. Default off.
• Thumbnail height: 24–160 px. Default 64 (48 on Mobile). Per screen size.
• Space in-between: 0–32 px. Default 8.
• Corner radius: 0–40 px. Default 4.
• Current thumbnail outline: color of the outline on the slide being shown.

Media & Background

• Display full media: shows the whole picture instead of cropping to fill. Default off.
• Full-width media (Media above text): turn off to set Media width (5–100%).
• Square media and Media corner radius (0–300 px) (Media above text).
• Overlay color and Overlay opacity (0–100%) (Text over media): a color over the picture so the text stays readable. Default gray at 30%.
• Background color: behind the slide. Default dark gray.

Text Style

• Title: text style controls, size up to 96. Default 40 (28 on Mobile), bold, white.
• Description: text style controls, size up to 40. Default 18 (16 on Mobile), white.

Button

• Primary or Secondary. Default Primary.

Frame

• Content alignment: Left, Center or Right. Default Center. Per screen size.
• Vertical position (Text over media): Top, Middle or Bottom. Default Middle.
• Space between elements: 0–64 px. Default 16. Per screen size.
• Horizontal padding: 0–200 px. Default 64 (24 on Mobile). Per screen size.
• Space between slides (Slide): 0–64 px. Default 16. Per screen size.
• Corner radius (0–48 px), Border (0–12 px), Border color, Shadow.

Spacing and Animations & Effects

Margin, plus Entrance and Scroll.

Connect to Data

More > Connect to Data > Connect Slides to makes one slide per photo in an image-gallery field. From a collection in Manage Slides makes one slide per item, with image or video fields.

Examples

• A landscaper's project photos: Photo Gallery, Mosaic, 3 columns, Visible rows 2 with "See all projects", lightbox on.
• A builder's house types: Photo Gallery with Enable links on, each photo linking to its house page, Text & button Below.
• A hotel's room slider: Media Slider, Slide transition, Center mode on, Active slide width 70%, Side slides opacity 40%, thumbnail strip on.
• A restaurant's homepage banner: Media Slider, Text over media, Fade, Autoplay 5 seconds, a video slide of the kitchen first.

Limits and what it can't do

• Media Slider holds up to 25 slides. At 25, Add Slides and Duplicate are grayed out and the list says "Up to 25 slides."
• Photo Gallery has no set limit, but very large galleries load slower; use Visible rows to keep the first view short.
• Slide width, Number of columns, Center mode and Space between slides only work with the Slide transition.
• Video slides always play silently with no controls. For a video visitors watch with sound, use the Video widget.
• With Enable links on gallery images on, there's no lightbox at all.
• Clients with only Widget content can manage photos and slides, but not the Design panel.

Who can use it

Anyone in your agency with the Mount Olympus tool. Client people need Editor to add, move, design or delete these widgets, or Widget content to change their photos and slides. Connect to Data needs Editor or Dynamic pages & Connect to Data. When Zeus fills a template, it puts the client's photos into galleries and sliders (see Fill a template with Zeus).

Troubleshooting

• Clicking a photo opens nothing: Enable links on gallery images is on and that photo has no link. Give it a link or turn the setting off for the lightbox.
• Photos are cut off: turn on Display full image (gallery) or Display full media (slider), or move the Focal point in the Manage window.
• I can't find Slide width or Center mode: switch Slide transition to Slide.
• Number of columns disappeared: it hides when Center mode is on or Slide width is Natural.
• The slider doesn't move on its own: check Autoplay, and remember it stops while the pointer is over it (if Pause on hover is on) and for visitors with reduced motion turned on.
• Text is hard to read on a photo: raise Overlay opacity or pick a darker Overlay color.
• A YouTube or Vimeo slide is blank on the live site: the cookie banner holds it back until the visitor allows marketing cookies. Use an uploaded video if it must always play.