Web Development Documentation

Smart Slider 2: Updating Sliders

I. Add an image to a Smart Slider 2 slider:

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.
  • Go to Components -> Smart Slider 2:

    SmartSlider2

Copy an Existing Slide

  • 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 Duplicate.
  • You should now be in a screen editing the new slide.

Edit the copied slide

  1. Change the name of the slide in Slide Settings, in the "Name" field (see #1 below). 
    Enter a description for the slide in the "Description" field.
  2. Change "Published" from "OFF" to "ON" (see #2 below)
  3. (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.
    • Enter a description for the image in the Image Description field
    • Click "Insert" to the upper right.
  4. Click the image layer under the "Slide" area to the bottom (see #4 below).
  5. On the left, under "Image item settings", click the "Image" button (see #5 below)
    • Browse to the location in Media where you uploaded your image, and click on the image.
    • Enter a description for the image in the Image Description field
    • Then click Insert.

SmartSliderHome2

  • Enter a description of the image in the Alt field under "Image item settings" to the left of the image preview
  • (Optional) Enter the URL for the page to be linked to in the "Link" field above the image preview
  • 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")
  • Click "Save" to the upper right.

 II. Modify a slide:

  • 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.
  • Go to Components -> SmartSlider2:

    SmartSlider2

  • Click the name of the slider/slideshow to be edited.
  • On the left, a list of individual slides will appear. Click on the slide you want to edit.
  • You should now be in a screen editing the slide.  
  1. Change the name of the slide in Slide Settings, in the "Name" field (see #1 below).
  2. (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 #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 Insert in the upper right.
  3. Click the image layer under the "Slide" area to the bottom (see #3 below).
  4. On the left, under "Image item settings", click the "Image" button (see #4 below)

    SmartEdit2
  • Browse to the location in Media where you uploaded your image, and click on the image. 
  • Enter a description for the image in the Image Description field
  • Then click Insert.
  • Enter a description of the image in the Alt field under "Image item settings" to the left of the image preview
  • Update the text in the Title field under "Image item settings" to the left of the image preview
  • Enter the URL for the page to be linked to in the "Link" field above the image preview
  • 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")
  • Click "Save" to the upper right.

III. Deleting a slide:

  • 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:

    Slider Delete
  • When asked "are you sure that you want to delete the slide?" click "OK".

IV. Reordering slides:

  • Go to Components -> SmartSlider2.
  • Click the name of the slider/slideshow 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:

    SmartSlider: Reordering slides
  • Click and drag the icon up or down to change the slide's order within the list:

    SmartSlider: reorder slides

Joomla-Workshops-Button-Hugo