Slideshows

Image slideshows can be placed just about anywhere in one of our pages.

They are most often using in the header area (partially hidden by the SCC logo and main menu), or within the main content area of a page.

Accessibility | Slideshows on Pages | Header Slideshow Settings

Image Accessibility

All images placed on a page (slideshows too!) must include alt text which describes the content or purpose of the image.

Consider the experience of visually-impaired people who are navigating the page using software that vocalizes the content to them.

  • If the image is used as a header, provide alt text that repeats the site or page section name. Alt text (which is required) is not to be confused with other image attributes such as title, caption, or description, which are all optional.
  • If the image is a photograph, describe the subject of the photograph in alt text.
  • If the image contains text, the alt text should include that text.
  • If the image links to a web page, state the topic of that page in the alt text.
  • If the image contains a great deal of data, ensure that the information is also available in text.

References

H30: Providing link text that describes the purpose of a link for anchor elements
H37: Using alt attributes on img elements
F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives

Slideshows on Pages

Prepping the Images

Slideshows are best viewed when all of the images in the slideshow are the same width and height, and have a fairly low file size without damaging image quality. Make a note of what the common width and height are that you used (my favorite size for slideshows is 720px wide by 405px high). I always run images through Photoshop to crop and optimize them before uploading them for a slideshow. You may have a similar image processing software available to you.

Creating the Slideshow

To create slideshow of images, we use a plugin called Meta Slider. It can be found in the black sidebar once you log in to the WordPress Dashboard.

Meta Slider button in WordPress

Meta Slider page in WordPress

To create a new slideshow from your sized and optimized images, click on the tab with a + on it.

Add slider in WordPress

It will become a tab that says New Slider. Select that text and give the slideshow a descriptive name. Then press Enter, which saves your new slider.

rename slider in WordPress

rename slider in WordPress

Click the Add Slide button.

Add slide in WordPress

You will see the Upload Files window. Click Select files, and upload your files.

Upload images for slider in WordPress

Be sure to create Alt Text for each image uploaded, like you would anywhere else. This text is primarily for the visually impaired users. Create Caption text if you want a caption to appear on your slideshow.

caption and alt ext for image in WordPress

Use the Shift and/or Ctrl (Cmd on Mac) key to click on more than one image, to select the images for this slideshow. Then click Add to slider.

media library selection in WordPress

It may take a moment, but eventually your images will be added to your new slider, along with their captions and links to the single, full-size images.

image data for sldier in WordPress

You can change the captions, and edit or delete the links. You can also delete a slide by hovering on the thumbnail and clicking on the red trashcan icon that appears.

deleting a slide in WordPress

Over on the right, you’ll need to review the slideshow settings. First, enter the height and width you set all your images to when preparing them.

meta slider settings in WordPress

I usually select Flex Slider as the type of slider at top, Fade for Effect, Arrows checked, and Dots for Navigation. There are additional settings below if you click on Advanced Settings.

meta slider settings in WordPress

When you are done with your settings, click Save,

Placing the Slideshow on the Page

In Meta Slider, code will appear on the far right under the settings. Select and copy this code.

meta slider shortcode in WordPress

Open or create the page you want to display this slideshow on.

pages button in WordPress

Place your cursor in the text editing box where it should go, and paste your code.

text editor and shortcode in WordPress

Save your page and view it in the browser. Watch it and interact with it to make sure it’s working the way you want it to.

To make changes, go back to Meta Slider and edit your new slider. It may need changes for individual images, or it may need changes to the settings.

Once you save your slider, it will continue to appear on your page, but with your updated changes. You will not need to go back and edit your page.

Deleting a Slideshow

To delete a slideshow from a page, simply remove the metaslider id=”XX” code.

To delete a slideshow from Meta Slider, scroll all the way down and click the Delete Slider button at the bottom of the right sidebar.

delete slider in WordPress

Header Slideshow Settings

When creating a Meta Slider for the header, please use the following settings.

Settings

  • Flex Slider format
  • Width: 1440px
  • Height: 400px
  • Effect: Fade
  • Theme: Default
  • Arrows: Unchecked
  • Navigation: Hidden

Meta Slider settings

Advanced Settings

Check the following:

  • Auto Play
  • Smart Crop
  • Random
  • Hover Pause

Slide Delay: 6000ms
Animation Speed: 600ms

All other settings can be left to default.

Meta Slider advanced settings