Web Development Documentation

Smart Slider 2: Add an 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.
  • 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.

Joomla-Workshops-Button-Hugo