slideshows

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 "Slidesettings" 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

Overview

This procedure describes how to add the "Ken Burns" motion effect (slow zooming in) to a slide in SmartSlider2. 

Note: this effect can only be applied to images that are in image layers, and not to images that are set as a background image.

Procedure

Select the slide to edit

1. Go to Components > SmartSlider2:
   
2. Click the name of the slider/slideshow to be edited:
   
   
   
3. On the left, a list of individual slides will appear. Click on the slide you want to edit:
   
   
   
4. You will now be at the Slide Settings page for the slide you want to edit.

Edit the slide

1. Click the image layer under the "Slide" area to the bottom (see #1 below).
2. On the left, find "Image item settings" (see #2 below) and scroll to the bottom.  If "Image item settings" does not appear, the image is most likely a background image and cannot get the "Ken Burns" effect.
   
   
   
   
3. Find the "Ken burns" section to the lower left (see #1 below).
4. Change "Enabled" to "On" (see #2 below).
5. Click "Save" to the upper right (see #3 below).
   
   
   
   
   
6. When you refresh the page containing the slideshow, you should now notice that the slider will slowly zoom into the image that you enabled the "Ken Burns" effect for.

I. Creating a slider:

• Log into the Administrator interface of the site.
• Go to Components -> Smart Slider 2:
  
  
• Click "Start" under "Manual Slider:"
  
  
  
  
• Enter the name of the slider for "Name" (see #1 below)
• Enter the dimensions of the slider for "Slider Size" (see #2 below). The ratio of width to height should match the ratio of the images you will be adding to the slider.
• For "Responsive mode," set "Down scale" to "ON" (see #3 below).
• Click "SAVE" when done (see #4 below).

Configure Autoplay Settings

Under "Autoplay settings", make the following changes:

• Autoplay: "Enabled" = ON (see #1 below)
• Interval = Set the desired interval (in milliseconds) (see #2 below) - for example, "5000" for 5 seconds
• Stop autoplay on = change all to OFF (see #3 below)
• Under "Widgets," click Autoplay(see #4 below)
  

• Change all Display settings to "ON" (see #1 below)
• Position:
  • Set "Horizontal" to "Right," position to "4," and unit to "px" (see #2 below)
  • Set "Vertical" to "Bottom," position to "4," and unit to "px" (see #3 below)
• Click "SAVE" to the upper right.

II. Create first slide:

• Click Create Slide:
  
  
  
• Enter a short name for the slide in the "Name" field (see #1 below).
• Below "Name," enter a short description for the slide in the "Description" field (see #2 below).
• Click "Layout" (see #3 below).
• Select the "image-only" layout (looks like an image expanded to fill the screen) (see #4 below):
• Click "Item" (see #5 below).
  
  
• For "Active Item", select "Image" for Layer 1 (see #1 below).
• Click the "Image" button (see #2 below) and select the image to be displayed in the first slider, then click Insert.
• Enter a description of the image in the Alt field (see #3 below).
• (Optional) Under "Image item settings" scroll to the bottom and change "Ken burns" to "On"
• Click "SAVE" to the upper right (see #4 below):
  
  
  
  

III. Add new slides as needed:

1. Click BACK TO DASHBOARD to the upper left.
2. Follow the steps for Adding an image to a new slide to create additional slides.
3. When done adding slides, click "SAVE" to the upper right.

IV. Modifying and deleting slides

1. To modify a slide, follow the steps at Smart Slider 2: Modifying a slide
2. To delete slides, follow the steps at Smart Slider 2: Deleting a slide
3. When done modifying and/or deleting slides, click "SAVE" to the upper right.

V: Create module displaying new slider:

• Go to Extensions > Modules:
  
• Click New:  
• Select Smart Slider 2:
  
  
  
• For "Title" enter a name for the module (see #1 below)
• Click the "Configure" button (see #2 below)
  • For "Slider" select the name of the slider to display
  • Click "APPLY" to the upper right
• To the right, change "Show Title" to "Hide" (see #3 below)
• Select a position from the "Position" dropdown menu (see #4 below)
• Click the "Menu Assignment" tab (see #5 below)
  
• Change "Module Assignment" to "Only on the pages selected" (see #1 below)
• Click "None" to the right of "Select" (see #2 below)
• Check the boxes to the left of any menu item that should display the new module
• When done, click "Save & Close" (see #3 below)

Overview

This article describes how to delete a slide from a SmartSlider2 slider (slideshow).

Procedure

• Go to Components -> SmartSlider2:
  
  
  
  
• Click the name of the slider/slideshow to be edited:
  
  
  
  
• On the left, a list of individual slides will appear. To the right of each slide name should be a green check icon. Hover over the check icon until you see Duplicate and Delete.
• Choose Delete:
  
  
• When asked "Are you sure that you want to delete the slide?" click "OK":
  
  
  
  
• The slide will be deleted from the slideshow.

These instructions will help duplicate and edit a text layer.

Find Smart Slider 2

• Go to Components -> Smart Slider 2:

Select the Slideshow

• Click the name of the slider/slideshow to be edited (e.g. "Homepage Slideshow").

Select the Slide

• Click the slide to be edited.

Copying Layers

There may be several layers for each slide.  Some layers will contain images, text, possibly a combination of both, or something else.  The layers may have a descriptive name or will be named by default something like "Layer #1".

If layers have descriptive names:

Use the "Active Layer" dropdown to select the layer to be copied, then skip to Duplicating the layer. 

If layers do not have descriptive names:

Try clicking the Item (text, image, etc) you'd like to copy in the slide's preview window that shows on the right to find the layer containing the Item to be copied:

• Click the Item to be copied.
• After clicking the Item to be copied, click the Layer button (left side). The name of the Layer containing the Item to be copied should appear to the right of Active layer.

Duplicating the Layer containing the Item to be copied:

• Click the icon that looks like stacked boxes to duplicate the Layer.
• The new layer will become the active layer.  It will have the same name as the original layer, but with " - copy" after it (for example, "Layer #1 - copy")

Change the Layer name:

• Change the new Layer's name so that it is easy to distinguish later.

Adjusting the appearance of the text in the new Layer:

• Click the text to edit.
• Adjust the appearance of the text.  Refer to other slides for settings in terms of font sizes and colors.  
• Click SAVE to the upper right to save your changes.

Please submit a workorder for additional assistance.

Overview

This procedure describes how to edit a slide that appears in a SmartSlider2 slider (slideshow).  You can change the image that appears in the slide, change the thumbnail (if applicable), rename the slide, change the description, edit the alternate text, edit the text in any text layers, and link the slide to an article or other URL.

Procedure

Upload images

1. 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. 
2. (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)
3. Log into the Administrator interface of the site.
4. Upload the new images into Media; see: Adding an Image to Media.
   

Select the slide to edit

1. Go to Components > SmartSlider2:
   
2. Click the name of the slider/slideshow to be edited:
   
   
   
3. On the left, a list of individual slides will appear. Click on the slide you want to edit:
   
   
   
4. You will now be at the Slide Settings page for the slide you want to edit.

Edit the 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. (Optional - only if thumbnails are used in the slideshow) Click the "Image" button to the right of "Thumbnail" (see #2 below)
   
   • Browse to the location in Media where you uploaded your thumbnail image, and click on the image.
   • Enter a description for the image in the Image Description field
   • Then click Insertin the upper right.
4. Click the image layer under the "Slide" area to the bottom (see #3 below).
5. On the left, under "Image item settings", click the "Image" button (see #4 below)
   
6. Browse to the location in Media where you uploaded your image, and click on the image. 
7. Enter a description for the image in the Image Description field
8. Then click Insert.
9. Enter a description of the image in the Alt field under "Image item settings" to the left of the image preview
10. Update the text in the Title field under "Image item settings" to the left of the image preview
11. (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.
12. 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").
13. Click "Save" to the upper right.
14. The changes to your slide should now appear in the slider.
15. If you would like to change the order in which the slide appears, see: Smart Slider 2: Reordering slides

Overview

This procedure describes how to change the order in which slides appear in a SmartSlider2 slider (slideshow).

Procedure

• Go to Components -> SmartSlider2:
  
  
  
  
• Click the name of the slider to be edited:
  
  
  
  
• In the list of the slides to the left, you will see a "mobile menu" icon to the left of each slide's name:
  
• Click and drag the icon up or down to change the slide's order within the list:
  
  
• The changes in order will take effect immediately.

Overview

This article describes how to unpublish a slide in a SmartSlider2 slider (slideshow).

Procedure

• Go to Components -> SmartSlider2:
  
  
  
  
• Click the name of the slider/slideshow to be edited:
  
  
  
  
• On the left, a list of individual slide names will appear. To the right of each slide name should be a green check icon, indicating that each slide is published:
  
  
  
  
• Find the name of the slide that should be unpublished, and click its green check icon to change it to a red X.  This will unpublish the slide:
  
  
• The slide will no longer be visible in the slideshow.  You can publish it again by clicking on its red X to change it back to a green check.

Overview

When updating a SmartSlider2 slider, you will usually need to add new slides, modify existing slides, delete slides, or change the order of slides.  You can follow the below links to find procedures on how to accomplish those tasks.

Add a new slide

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.

Smart Slider 2: Adding an image to a new slide

Modify a slide

This procedure describes how to edit a slide that appears in a SmartSlider2 slider (slideshow). You can change the image that appears in the slide, change the thumbnail (if applicable), rename the slide, change the description, edit the alternate text, edit the text in any text layers, and link the slide to an article or other URL.

Smart Slider 2: Modifying a slide

Deleting a slide

This article describes how to delete a slide from a SmartSlider2 slider (slideshow).

Smart Slider 2: Deleting a slide

Reordering slides

This procedure describes how to change the order in which slides appear in a SmartSlider2 slider (slideshow).

Smart Slider 2: Reordering slides