Step 1 - Create the slideshow

  1. Add Content > _Responsive > Slide Show - EZ
  2. Name the slideshow after the page it will be wired to. For example, a slideshow on the index page should be named index-slideshow-ez.
  3. Choose a "_content" folder to place the file in
    • NOTE: To continue setting up the slideshow manually, select "No" to "Feed based?" If you want your slideshow to be automatically generated from an Article Feed, contact itweb@jmu.edu to get your configuration set up
    • Slideshows do not auto-rotate due to accessibility/usability issues; however, you can select "Yes" to the Randomize option to allow the slideshow to start at a random location allowing your users can see different images every time they visit your page

Frequently asked question: “Can we have our slideshow automatically rotate through the slides?”

The answer is no, and although auto-rotating slideshows are all over the internet, usability studies show this is a bad user experience.  In summary:

  • Moving UI elements usually reduce accessibility, particularly for users with motor skill issues who have difficulty clicking something before it's taken away.
  • Low-literacy users often don't have enough time to read the information before it's removed.
  • International users also read more slowly if your site is not in their native language, and thus they won't be able to understand a panel if it's displayed only briefly.
  • Single-item visibility is reduced by having to take turns being on display. The probability that users will spot the item they want is drastically reduced when only one thing is displayed at any given time; in the Siemens example, the discount deal is visible only 20% of the time.
  • It's just plain annoying for users to lose control of the user interface when things move around of their own accord.
  • Most important, because it moves, users automatically assume that it might be an advertisement, which makes them more likely to ignore it.

Additional reason not in the usability study: you can only measure engagement with a slideshow if the user clicks on it.  If the slides auto-forward, the user may have read the slide, but there is no way to know through analytics data.

 

Slideshow images

Slideshows have images that can be clicked through by a user. They can also display overlay text and contain links.

Follow these dimensions for using other images:

  • Resolution must be 72dpi
  • Recommended file format is .jpg with quality of 8
SLIDESHOW width height
tall 1000 600
short 1000 500

 

Step 2 - Add Images and Links

  1. Add images to the slideshow that meet the slideshow image size requirements (1000px wide by 600/500px high)
  2. Add links to slides if desired; NOTE: If one slide has a link, the rest should have links too. Either link all images or don’t link any
  3. Use the overlay text box to enter text that will display over the image next to the slide navigation arrow; however, if one slide has overlay text, the rest should have overlay text too. Either display text on all images or don’t have text on any
    NOTE: We recommend using slideshows to display images that speak for themselves, with links to pages that go into more detail
  4. Select full-width or half-width for the slideshow 
    NOTE: Overlay text will not display on half-width slideshows
slides2.png

Step 3 - Add slideshow to Page

  1. Wire the slideshow to a page, using the "Feature_image" Region, with the shared format: "slideshow-ez"

 

Replacing slideshows with featured images

  1. On a page that has a slideshow, click Edit
  2. Select the Configure tab
  3. Locate "Feature_image" Region
  4. Check the no block and no format boxes to revert the Region to default
  5. Save and submit
  6. Click Edit on the page again
  7. Uncheck the no block and no format boxes
  8. Save and submit
  9. Edit the page to add a feature image

Back to Top