1. Tutorials
  2. Paragraph Options Layouts
  3. Slideshow

Slideshow

View the example page to see this paragraph-type in action.

Slideshow Example

Guidelines for use

  1. This paragraph is always used at 100% width of the page container (not the browser window).

  1. Consider where the focal point of your background image is, and align the content in the section with your best attempt not to overlap
  2. If your image has a lot of bright and dark areas, you may have legibility issues with your content. Consider either a new image or re-cropping your image in a different way.
  3. Determine if the image caption will apply to all images or differ on each image across the slideshow and prepare caption(s) as applicable.

  1. Layout format: This determines if the slideshow will be displayed to the left, right, or centred.
  2. Image: This is the image that will be displayed within the slideshow on a desktop.
  3. Mobile image: This is the image that will be displayed within the slideshow on a mobile device.

Use the slideshow paragraph to highlight a set of images and the accompanying content.

On a desktop, the slideshow can be aligned to the centre, left or right, but in mobile view, it will always appear stacked regardless of alignment.

If a mobile image is uploaded, it will override the desktop image on mobile devices. Otherwise, the desktop image will be used by default.

How to implement

  1. Create a Basic Page.
  2. Scroll down to the Paragraphs section, click the drop-down arrow, and click "Add Slideshow".
    Shows where the Slideshow is located in the Add Paragraph dropdown menu.
  3. Proceed to the Overview of a Slideshow section of this page.
  4. Once you've added your Slideshow content, choose your publishing options and click Save at the bottom of the page.

Overview of a Slideshow

Image of the slideshow overview page with each field numerically annotated and described below.

  1. Click and drag the crosshairs handle to rearrange your paragraphs.
  2. Remove this entire paragraph.
  3. (Optional) Slider ID Override - add a unique ID to link to this specific slide.
  4. Grey Background Toggle - if this option is unchecked, the divider will appear on a white background. If it is checked, it will appear with a grey background. Only use the grey background if you are adding a divider between two paragraphs that also use a grey background.
  5. Layout Format - changes the alignment of the slideshow.
  6. (Optional) Time Per Slide - the amount of time in seconds each slide is displayed. Editing this has no effect if you only have one image.
  7. (Optional) Transition Speed - the amount of time in milliseconds it takes to transition from one slide to the next. Editing this has no effect if you only have one image.
  8. Remove this individual slide.
  9. Caption - this text describes the image on this slide.
  10. (Optional) Photo credit: Give credit to the person/company who created the image - it will appear right-aligned below the image.
  11. Click and drag the crosshairs to rearrange your slides within the Slideshow paragraph.
  12. Image - the image that you wish to display on the page.
  13. (Optional) Mobile Image - upload an image for the slide that you'd like to appear on the mobile version of the slider. It's recommended you use the file browser rather than uploading your images directly to the slide. This way you can easily reuse images.
  14. (Optional) Add Slides - add additional slides to your Slideshow.