Slideshows

Slideshows are a great way to enhance your site or tell a story through images.

3 steps to having a slideshow:

  1. Creating the slides
  2. Building a slideshow
  3. Adding it to your page


And perhaps a little preparation:

Please use images resized and optimized for display on the web. See how to transform large digital images to web-friendly sizes.

The system will crop the image to the size selected. Images may need to be manually cropped to avoid strange stretching or cropping, especially if an image is originally vertical.

There are four different size options:

  • Large or small photo (3x2 - regular landscape photo)
    - large photo expands the slideshow to the full width of the content area
    - small photo resizes the slideshow to 480x320
  • Wide 2 (16x9 - widescreen)
  • Wide 3  (roughly 2x1)

Slideshows built using the page elements in a news article or on an admissions page have only one size, which is a 2x1 aspect ratio, no matter which option is selected. Photos should optimally be  1600px wide, and at least 1200px wide.

1. Creating slides

Go to 'Add content' in your gray toolbar at the top of the browser.

Select 'slides'

Give it a title. Titles are for our own reference and don't appear anywhere.

Click in the box or on the 'Browse' button to bring up a file dialog window, navigate to the images, select one, click 'open', click 'Upload' button.

Optionally add a caption for the slide.

Save the slide. The default size for display after saving is 480 by 320. Don't be alarmed if the image looks odd. The proper size will be set in the slideshow and it will display correctly on the web page.

2. Building a Slideshow

Go to Add content.

Select 'Slideshows'.

Give it a title. Again this won't appear anywhere, it's for our reference.

Skip down to "Slides:" in the gray table. Click in the window and start typing the title of your slide. This is an autocomplete field, so after a few letters, slides with matching titles will appear in a list. Select your first slide.

Click the 'Add another item' button and repeat the process.

To reorder, drag and drop a slide using the crossed arrows to the left of the title.

Once all of the slides are added, set the size for the slideshow.

Publish and Save. Upon saving, you will see the title of the slideshow and the list of slides selected.

Most slideshows are scaled to the full width of the page. If the image is resized unusually, the best option is to crop the individual photo so that it has a 2x1 ratio. Go back to the individual slide and re-upload the cropped photo.

3. Place Slideshow on a Page

Either navigate to the page the slideshow will be added and click the edit tab or create a new page.

Place the cursor in the slideshow window and start typing the title of a slideshow. Select the slideshow from the titles that appear.

Save.

Once the slideshow is on a page, a small widget appears in the top right (if logged in) which you can click to edit the slideshow. To edit a caption or an individual image, you will need to go to My Workbench to find that slide.

In news articles a slideshow can be placed anywhere on the page, by typing in a token.  A token is a line of text that refers to that specific element. In the Body portion of the page type in [page elements: slideshow] in the desired area. The text will be replaced by the slideshow. If there are two, the format is [page elements:slideshow:nodeIDnumber]