Slideshows

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

CMS: Slideshow Demo.

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

The slideshows require specific image sizes. This helps make for a consistent, engaging presentation on the page. Images may need to be resized and resaved to avoid strange stretching or cropping.

There are four different size options:

  • 680 by 292 pixels - anyone who had a NeonBeige slideshow would use this
  • 680 by 382 pixels
  • 680 by 453 pixels
  • 480 by 320 pixels - for use on pages (articles) with a right sidebar

The image below shows the relative sizes and aspect ratios of those sizes. If your image matches the aspect ratio, which would be likely for the standard photo sizes, the system will simply scale appropriately and the image will look fine.

 

 

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 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.

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.

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. 

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.