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.
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:
The image with the greater width-to-height ratio sets the height of the block:
To set the height of the gallery, ensure the image with the widest aspect ratio has the height you want. For example, to reduce the height of the whole gallery, you could crop the image with the widest aspect ratio to shorten it.
Here are some more tips for adjusting the height:
- To help predict your gallery's height and keep your image sizes consistent, consider using a third-party image editor to crop images to the same aspect ratio before uploading.
- You can also crop an image after adding it to your site with the built-in Image Editor.
- Choose whether all images in the slideshow display at the same aspect ratio with the Crop setting.
- To learn more about aspect ratios, visit Understanding aspect ratios.
Step 1 - Add the Slideshow Gallery Block
- Open a page or post editor.
- Click an Insert Point or the +.
- Under Gallery, select Slideshow from the menu.
- For more detailed steps, visit Adding blocks.
Step 2 - Add images and video
You can upload images, add stock 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)
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.
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.
Remove the gray color behind images that aren't cropped.
This option only appears when Automatically Crop Images is unchecked.
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:
- Return to the Content tab of the block editor.
- Hover over an image.
- 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.
Here's a sample of a Slideshow Gallery Block:
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.