Slideshows are a great way to enhance your site or tell a story through images.
3 steps to having a slideshow:
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.
There are four different size options:
- Normal (3x2 - regular landscape photo) - for page with a sidebar
- Wide 1 (3x2) - for page with no sidebar
- Wide 2 (16x9 - widescreen)
- Wide 3 (roughly 2x1)
Slideshows built 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.
1. Creating slides
Go to 'Add content' in your gray toolbar at the top of the browser.
Give it a title. Titles are for our own reference and will be used when building the slideshow, but otherwise they don't appear.
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.
2. Building a Slideshow
Go to Add content.
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.
The settings under slideshow do not apply.
Publish and Save. Upon saving, you will see the title of the slideshow and the list of slides selected.
All slideshows will appear as 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. For more instructions on resizing images, visit this page.
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.
To place the slideshow in a particular area of the page, tokens will be used. A token is a line of code 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.
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.