Slideshows
Photo slideshows are a good way to include multiple images on a page without taking up very much space.
Guidelines
- Slideshows shouldn’t include more than 5 images. Too many images slow down the page’s load time and increase data usage, especially for people with slow connections or using mobile devices.
- Slideshows are for visual interest only and shouldn’t include any of the page’s core content.
- Use images that are at least 650px wide for 50% width slideshows, and at least 850px wide for 100% width slideshows.
- Images should ideally have a landscape (horizontal) orientation.
Styling
Slideshows always use a 2:3 aspect ratio with a landscape (horizontal) orientation, regardless of the orientation and ratio of the images used. Images will be cropped towards the center if they don’t fit that ratio and orientation.
Slideshows can either be 100% the width of the page, or 50% and aligned to the right.
Captions
Any number of images in a slideshow can have captions – all, some, or none at all. Captions should only be used to describe the image and possibly link to a related page. They shouldn’t contain any of the page’s core content.
Responsive behavior
Slideshows will resize just like a regular photo. Captions disappear on small screens – we’re working on this. If there are too many dots to fit on one line, they wrap onto a second line.
Development info
- Stylesheet location:
/_source/styles/components/_slideshows.scss - Don’t include more than 5 images.
- Use images that are at least 650px wide for 50% width slideshows and at least 850px wide for 100% width slideshows.
- In WordPress, use the built-in WordPress gallery feature. See how to create a gallery.
- The slideshow shortcode still works, but it’s deprecated. Use a WordPress gallery instead.
Slideshow example
Cat wearing sunglasses
Cat licking its paw
