Slideshows
About this component
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.
- See “How to use” below for sizing and orientation guidelines.
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.
Styling
Slideshows use a 3:2 aspect ratio with a landscape (horizontal) orientation, regardless of the orientation and ratio of the images used. Images will be cropped to show 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 (preferably) or left.
Responsive behavior for Slideshows
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.
How to use for Slideshows
Use the built-in WordPress gallery feature. See how to create a gallery in Spaces.
Choosing images
Ideally, choose images that have a 3:2 aspect ratio, or are at least the same width and height. The slideshow will crop taller images and show the center of the image, which may cut off important details or look awkward. Slideshow sizes:
- 100% width slideshow:
- No sidebar: 1000px wide and 667px tall
- Sidebar: 660px wide and 440px tall
- 50% width slideshow:
- All pages: 600px wide and 400px tall (will display smaller on medium and large screens, but needs to be at least this size for small screens)
Development info for Slideshows
Stylesheet location:
/_source/styles/components/_slideshows.scss
Please use a WordPress gallery if possible!
Javascript adds all the extra functionality, styles, and accessibility to make the slideshow. You only need to include the images and optional captions.
<div class="slideshow"> <!-- optional alignright and size-percent-50 -->
<div>
<img src="" alt="" />
<p>Optional caption</p> <!-- can include a link -->
</div>
<div>
<img src="" alt="" />
<p>Optional caption</p> <!-- can include a link -->
</div>
...
</div>
Example of Slideshows
Like regular images, slideshows can be 50% width and aligned to the right. The text will wrap around the slideshow on the left and then return to the full width of the page if taller than the slideshow.