Web Development Documentation

Overview

This procedure describes how to create a new slide in SmartSlider by copying an existing slide, and then replacing the image in the copied slide with a new image.

Upload an Image

• Find or create an image that has the same proportions as your slideshow. For most websites using the standard SAS responsive template, this will be 1200 pixels wide by 400 pixels high.
• (Optional - only if thumbnails are used in the slideshow) Create a copy of the image, crop it to square dimensions, and resize it to no more than 100 pixels wide by 100 pixels high (this will be the thumbnail image)
• Log into the Administrator interface of the site.
• Upload the new images into Media; see: Adding an Image to Media.

Copy an Existing Slide

• Go to Components -> Smart Slider 2:
  
  
• In SmartSlider2, click the name of the slider (slideshow) to be edited:
  
  
  
  
• On the left, a list of slides in the slider will appear. To the right of each slide name should be a green check icon (see #1 below). Hover over the check icon until you see Duplicate and Delete. Choose Duplicate (see #2 below).
  
  
  
  
• You should now be in a screen to edit settings for the new slide.

Edit the copied slide

1. Enter a short name for the slide in the "Name" field (see #1 below). 
2. Below "Name," enter a short description for the slide in the "Description" field.
3. Change "Published" from "OFF" to "ON" (see #2 below)
4. (Optional - only if thumbnails are used in the slideshow) Under "Slide settings" at the top, click the "Image" button to the right of "Thumbnail" (see #3 below)
   
   • Browse to the location in Media where you uploaded your thumbnail image, and click on the image.
   • Click "Insert" to the upper right.
5. Click the image layer under the "Slide" area to the bottom (see #4 below).
6. On the left, under "Image item settings", click the "Image" button (see #5 below)
   
   • Browse to the location in Media where you uploaded your full-sized image, and click on it.
   • Click Insert.
   
   
   
   
7. Enter a description of the image in the Alt field under "Image item settings" to the left of the image preview.
8. If there is text in the "Title" field, change it to a name for your image.
9. (Optional) To link your slide to another page, enter the URL for that page in the "Link" field above the image preview, or click Article to link to an article within your website.
10. For slides with text layers only:
    • Click the text description layer under the "Slide" area to the bottom.
    • Enter the text to be displayed under the "Text" box to the left (found under "Heading item settings").
11. Click "Save" to the upper right.
12. Your image should now appear in the slider.
13. If you would like to change the order in which your image appears, see: Smart Slider 2: Reordering slides