Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using the Slideshow Gallery Block

The Slideshow Block is one of four Gallery Block designs. It adds a slideshow of images and videos to a page or blog post. Clicking an item will display the next image or video in the gallery. Clicking a video will play the video.

Determining slideshow height

The height of the Slideshow Gallery Block is set by the height of the widest image. The block considers the widest image to be the one with the widest aspect ratio. 

Here's an example of two images you might upload to the Gallery Block. One has a greater width-to-height ratio, and the other is wider in pixels:

aspect-vs-pixels.png

The image with the greater width-to-height ratio sets the the height of the block:

aspect-vs-px-2.png

Step 1 - Add the Slideshow Gallery Block

  1. Open a page or post editor.
  2. Click an Insert Point or the +.
  3. Under Gallery, select Slideshow from the menu.
  4. For more detailed steps, visit Adding blocks.

Step 2 - Add images and video

You can upload images, add Getty Images, embed videos, and display content from an existing Gallery Page  in the Content tab of the Block Editor.

To learn more, visit Gallery Blocks overview.

Step 3 - Add titles and descriptions (optional)

You can add titles and/or descriptions in each image's settings. Each image title acts as alt text, which is helpful for SEO. To learn more, visit Gallery Blocks overview.

To display the titles and descriptions and customize how they appear, check Show Title and Description in the Design tab in the next step.

Note: Titles and descriptions may not appear on mobile depending on the width of the browser.

Step 4 - Customize the design

Click the Design tab to edit the design and behavior of the Slideshow Block.

Select from these options. The preview of the gallery on your page will change so you can view the changes in real time. We recommend playing around with the settings until you find a design you like.

Automatically Transition Between Slides

Automatically switch to the next image or video after a set period of time. When checked, a slider appears for setting the transition time between one and 10 seconds

Checking this setting can prevent videos in the gallery from playing all the way through. To prevent this from happening, upload a custom thumbnail for the video.

Playing a video overrides this setting. If a visitor plays a video, they will need to click to see the next item in the gallery.

Show Next and Previous Controls

Add arrows for navigation. The controls appear in overlays to the left and right of the main image or video.

If your gallery contains videos and Automatically Transition Between Slides is checked, we recommend checking this setting.

Automatically Crop Images Crop or resize the images for the best design.

When unchecked:

  • The widest image or video spans the full width of the block. Its height is resized to preserve its aspect ratio.
  • All other images and videos are resized to have the same height as the widest image or video.
  • Aspect ratios are preserved.
When checked:
  • The widest image or video spans the full width of the block. Its aspect ratio is preserved with its height.
  • All the other images and videos are resized to have the same width and height as the widest image or video.
Show Thumbnails

Add a strip with thumbnails of all images and videos in the gallery below the main image.

When checked, sliders appear to set the thumbnail strip height and the distance between the thumbnail strip and the main image.

Show Title and Description

Display image titles and descriptions as set in each image's settings.

When checked, more options appear to set the location and to only display them on hover.

Step 5 - Add clickthrough URLs (optional)

You can link images to external pages, internal content, or files by adding Clickthrough URLs. This is a great way to use the gallery to encourage clicks to other content, like client projects, products, files, or blog posts. Clickthrough URLs work with images, but they don’t work with videos.

Note: Clickthrough URLs override navigation in this block. If you use Clickthrough URLs, we recommend checking Show Next and Previous Controls in the Design tab of the Block Editor.

To learn more, visit Gallery Blocks overview.

Step 6 - Crop images with focal points (optional)

If you don’t like how an image is cut off in the slideshow, you can change it using its focal point. Focal points can reposition each image in its container and change what displays in the cropped area:

  1. Return to the Content tab of the Block Editor.
  2. Hover over an image.
  3. Click and drag the grey circle that appears.

Step 7 - Save

When you’re done adding content and designing the Slideshow Block, click Apply.

Step 8 - Change the gallery design

You can switch the design to a different block in the Design tab of the Block Editor. To learn more, visit Gallery Blocks overview.

Sample

Here's a sample of a Slideshow Gallery Block:

Mobile

On mobile, the gallery displays as a slideshow. Tap to display the next image.

  • The automatic transition and navigation settings you chose in the Design tab, including thumbnail navigation, still apply on mobile. Clickthrough URLs work when tapped. 
  • Titles and descriptions won't appear on displays less than 480 pixels wide. This includes most smartphones held in portrait mode.
  • Captions (including on-hover captions) may display in landscape mode and on larger devices, such as tablets. This depends on the device.

Was this article helpful?
21 out of 61 found this helpful
Using the Slideshow Gallery Block