Widgets


 





Add the Slideshow Widget to Your Page

Who can use this feature?

system_admin.png Slash.png Owner.png

 

 

Overview

This article will show you how to add the slideshow widget.

Compliance Notes

  • Ensure that slideshows have four images or fewer. If there are more than 4 images, consider placing them in a photo gallery instead.
  • Ensure that each image has compliant alt text.
  • Turn on next/previous images and pagination options.
  • Charts, graphs, maps, images with texts (Complex images) should not be used in slideshows.

Instructions

  1. Navigate to the page you would like to add the Slideshow Widget to
  2. Ensure that Live Edit is On
    live_edit_is_on.png
  3. Select the Widgets tab
    widgets.png
  4. Drag-and-drop the Slideshow Widget into your content area
    drag_and_drop_slideshow.png
  5. Click Add Images in the slideshow pop-up window
    slideshow_add_images.png]
    • Compliance Note: Add no more than four images to the slideshow widget using the add images button
  6. Check the boxes for the images you would like to add
    check_boxes_for_slideshow.png
  7. Select Insert Marked
    insert_marked_button.png
  8. Add a Title
    add_a_title.png
  9. Expand Advanced to configure more information
    Advanced_options.png
    • Caption: Changes the image caption
    • Alt text: Ensure that each image has compliant alt text
    • Link: Place a check in Link to display fields where you can paste 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: Removes the image from your slideshow
  10. Choose the Options Tab for more options
    Options_tab.png
    • 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; selecting this will cause more options to appear
      more_options.png
      • Caption Background: Display 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; selecting this option will allow more options to appear
      arrows_1.png
      • Always show, even when not hovering over slideshow: Click to enable
      • Always show arrows, even on narrow widths (excluding mobile): Click to enable
      • Arrow Color: Color of the arrow
      • Next/Previous Arrow Background: Displays circle background for arrows; check for compliance
      • Arrow Background Color: Determines color of arrow background color
      • Next/Previous Background: Displays vertical bar background for the slideshow arrows
        next_previous.png
        • Background Color: Determines color of arrow background
    • Pagination: Check for compliance
    • Pagination Style: Use either Dots or Numbers for the pagination links
  11. Select Save Slideshow
    save_slideshow.png
  12. Click Save at the top of the page
    save_page.png



I'd Like to Request an Enhancement

0 out of 0 found this helpful

Updated:
Follow

Article Feedback

  • Avatar
    Janine Borja

    I think the title on this article is slightly mis-leading. I was looking for instructions on how to populate the widget and did not look in this article due to the title. Perhaps the section concerning populating the widget could be pulled out into its own article? Or the title on this article could be change to more accurately reflect the information that will be provided?