The Media Gallery paragraph displays a set of images in either a slideshow or a tiled grid layout. It is designed for flexibility and works well across desktop and mobile screens. You can add an optional heading for the gallery, and include as many images as you’d like. Each image can also have its own optional heading and caption.
- The Slideshow displays one image at a time. Users can click the arrows on either side of the image to scroll through the gallery. If slide thumbnails are enabled, small previews appear below the slideshow, allowing users to jump directly to a specific image by clicking its thumbnail. The slideshow layout is optimized for 16:9 images, but other shapes will display correctly.
- The Tiled layout arranges images in a flexible, masonry-style grid and works well with images of varying sizes and aspect ratios. Users can click any image to open it in slideshow view. From there, they can either close the image to return to the grid or use the slideshow controls to browse through the gallery.
How to Add a Media Gallery
- In the Paragraphs section, click Add Media Gallery.
- (Optional) Fill in the Heading field to display a title above the gallery.
- Under Media Gallery Type, choose one of the following:
- Slideshow: A carousel-style layout that cycles through the images.
- Tiled: A masonry-style grid that displays all images at once.
- Click Add Item to Media Gallery to begin adding images.
Add Items to Media Gallery
Add each image to your Media Gallery by creating a new Media Gallery Item. You’ll choose an image and can include an optional heading or caption.
- Click Add Item to Media Gallery.
- Under Item, select or upload an image from the Media Library.
- (Optional) Fill in the Heading field to display a subheading with the image.
- (Optional) Add a Caption to provide more detail about the image.
- Repeat as needed to add additional images.
- To rearrange images in either view, collapse the media gallery and drag the media items up or down the section.
Default settings are for each galley type are provided, but you can customize the layout and behavior of your gallery by expanding the Slideshow Options or Tiled View Options sections below the main Media Gallery fields. Choose the section that matches the Media Gallery Type you selected.
- Transition Style
Choose how slides change:- Slide: Standard side-to-side movement.
- Loop: A continuous loop that scrolls without interruption.
- Fade: Slides crossfade into one another without movement.
- Rewind
Controls whether the slideshow starts over after the last slide.- True (default): After the last slide, it continues from the first.
- False: Stops at the end.
- Caption Position
Choose where captions appear on each slide:- Overlay Image: Captions are displayed on top of the image.
- Below Image: Captions are displayed beneath the image.
- Enable Thumbnails
Adds a row of clickable thumbnail images below the slideshow:- True: Thumbnails appear and sync with the main image.
- False: Thumbnails are hidden.
- Column Count
Number of columns to use in desktop view (2–5). Default is 3 columns. Layout collapses to 2 on tablets and 1 on mobile. - Tile Spacing
Adjust the spacing between tiles (0–32 pixels):- 0: No space (tiles touch)
- 16: Balanced spacing (default)
- 32: Wide spacing between tiles
- Horizontal Order
Controls whether tiles are arranged strictly left-to-right or optimized for layout fit:- True: Enforces left-to-right, top-to-bottom order. Best for content with a defined sequence.
- False: Optimizes for compact layout. Tiles may appear slightly out of order.
Tips for Using the Tiled View
The Tiled View layout is flexible and well-suited for image-heavy pages, but for the best visual results, keep the following tips in mind:
-
Standalone pages work best. A simple, full-width page dedicated to the gallery gives your images the most space and visual impact.
-
Use one gallery per page whenever possible. You can add more than one Media Gallery to a page, but multiple Tiled Views may compete for space or disrupt layout consistency.
-
If combining with other content, place the gallery at the bottom. Tiled View works best as a visual capstone at the end of the page, rather than in the middle of long text sections.
-
Avoid mixing with other complex page elements. Tiled View can feel cluttered when placed beside visually complex paragraphs like accordions, icon rows, and multi-column paragraphs. In those cases, the Slideshow View is often a better fit.
Example Slideshow
-
Optional Heading Goes Here
Optional caption goes here. -
-
-
-
-
Example Tiled Gallery
Optional Heading Goes Here
Optional Heading Goes Here