Add the Slideshow Widget to a Page

This article will show you how to add the Slideshow Widget to a page.

Compliance Notes:

• Ensure that slideshows have no more than four images. If there are more than 4 images, consider placing them in a Photo Gallery instead.

• Ensure that each image has compliant alt text.

• Keep the next/previous arrows and pagination options enabled.

• Charts, graphs, maps, and images with text (complex images) should not be used in Slideshows.

Who can use this feature?

System Admin | Owner | Publisher | Author

Instructions

1. Sign in to your website solution

2. Navigate to the page

3. Make sure that Live Edit Is On:

4. If needed, drag and drop the Slideshow widget into your content area:

5. Or, click on an existing Slideshow widget:

6. Click Add Images:

7. To upload new images:

   1. Select the Add Images button:

   2. Drag-and-drop images into the Document Center Upload Images box and click Continue:

   3. Configure image fields as needed and click Add Images:

      • Display Name: Change the display name of the image

      • Alt Text: Add descriptive text for accessibility

      • Hide this document from search: This option will be checked by default, uncheck to include the image in search listings

8. Check the boxes next to the images you want to include in the Slideshow:

   Note:

   To easily locate an image, you can Search for Display Name or ID. You can still select multiple images at a time, even if you search for different images. The widget will remember all the images you check throughout your search session.

9. Click Insert Marked:

10. If needed, edit the image Title:

11. Expand Advanced to configure additional information:

    • Caption: Add a caption for the image, this is a smaller body copy below the title

    • Alt Text: Add alt text for Accessibility Compliance that describes the subject matter of your image. The alt text will be seen as a user hovers over the image. If the uploaded image has text, include all text within the alt text field.

    • Link?: Check to enter a URL you want that image to link to

    • Display: If you want this image to only be displayed within a certain date range, enter those dates here

    • Remove: Click to remove an image from the slideshow

12. To change the order of your slideshow images, use the styling tool that appears as you click on one of the images and start to drag it up or down in order:

13. Select the Options tab and configure fields, as needed:

    • Slide Timing: The number of seconds each image will display

    • Transition: Images can either Fade from one to the next, or Slide to the next

    • Transition Timing: The number of seconds it takes for the fade or slide

    • Slide Title: Check to place a title on each slide

    • Slide Caption: Check to show captions with each image

      • Slide Overlay: Displays the title and/or caption in an overlay on each slide

      • Caption Background: Display the background for the overlay

      • Caption Location: Determines the location of the caption and overlay

      • Inset Caption: Insets the caption so that it’s not aligned to the border of the Slideshow

      • Narrow Display Behavior: Determines how the slide will behave in the narrow view

    • Next/Previous Arrows: Display left and right navigation arrows; this option will be enabled by default to help you maintain accessibility best practices

      • Always show arrows, even when not hovering over slideshow: Click to enable

      • Always show arrows, even on narrow widths (excluding mobile): Click to enable

      • Arrow Color: The color of the arrow

      • Next/Previous Arrow Background: Displays circle background for arrows; check for compliance

      • Arrow Background Color: Determines the color of the arrow background

      • Next/Previous Background: Display a background behind the arrows on the left (previous) and right (next) sides

        • Background Color: Determines the color of the arrow background

    • Pagination: This option will be enabled by default to help you maintain accessibility best practices

      • Pagination Style: Use either Dots or Numbers for the pagination links

    • Randomize Slides: Display slides in a random order

14. Click Save Slideshow:

15. Click Save:

Supporting Articles

• Image and Slideshow Best Practices