Follow

Slide Show Tool

The Slide Show tool is a Main Body and Right Side tool that can be used to display a selection of photos. This article will provide instructions for adding, resizing, and cropping an image and adding a video to the slideshow.   

Note: We recommend including 10 or fewer images in this tool to keep download time for your slideshow to a minimum. You may want to use the Photo Gallery tool if you have more than 10 photos to display.

Access Main Body

In the CMS4Schools Main Website Administration Navigation Builder click on the Main Body content of the page where the Slide Show Tool will be displayed.

SS_1.jpg

 

Main Body: Add the Slide Show Tool

SS_2.jpg

  1. Add Tool to this page: Select Slide Show from the list
  2. After: Choose the position of the tool. The default is at the bottom of the page. The first tool added will only have the "Place at top of page" option. When there is more than one tool, select the item you want to add the tool after.
  3. Select Add to open the Slide Show screen.

Access the Right Side Bar

In the CMS4Schools Main Website Administration Navigation Builder click on the Right content link of the page where the Resource News Tool will be displayed.

Note: If no Right Side tools are used, the Main Body will use the full width of the page except for the left side navigation links. When tools are added to the Right Side, all tools in the Main Body will automatically resize to optimally fit the smaller width of the Main Body area.

SS_3.jpg

Right Side: Add the Slide Show Tool

SS_4.jpg

  1. Add Tool to Right Side: Select Slide Show from the list
  2. After: Choose the position of the tool. The default is at the bottom of the page. The first tool added will only have the "Place at top of page" option. When there is more than one tool, select the item you want to add the tool after.
  3. Choose whether or not to use a line to separate the individual tools add to the Right Side.
  4. Select Add to open the Slide Show screen.

Add Slide Show

After clicking add the Slide Show screen will open.

SS_5.jpg

 

  1. Slide Show Order: Select to show the slides in the order they are listed or randomly
  2. Seconds Between Slides: Default is 4 seconds, but this can be changed as desired.

  3. Maximum Height For Photos: Default height is 267 pixels, but keep in mind that if your site may have customized with predetermined values.

  4. Maximum Width For Photos: For the Main Body only, you can adjust the slideshow width. The default for the main body is 400 pixels, but keep in mind that if your site may have customized with predetermined values.

  5. Resize All/Resize Existing Photos: Select this check box to have all of your photos in the slideshow be resized to the maximum height.

    Note: This cannot be undone. If you try to make an image larger after the resize it will become pixelated. You will need to upload the original image file.

Select Update to add the Slide Show tool to the page.

 

 

Slide Show Tool Options

SS_6.jpg

  1. edit: Add/edit/remove tool heading, change tool status to inactive/active, or schedule a status change.
    Note: It is recommended to always use a title when a tool is added to the right side of a page.
  2. Add: Use the drop down to choose the numbers of photos and then select add to open the Add Slide Show Image screen.
  3. Slide Show Properties: Select to update any of the Slide Show tool properties.
  4. Convert to Photo Gallery: Only in the Main Body, you will have an option to convert the Slide Show tool into a Photo Gallery too. See the Photo Gallery Tool article for more information about the photo gallery.
  5. Image Status: Select to change the status of the image to active or inactive
  6. Update Image: Select to make changes to the image
  7. Delete Image: Select to delete the image
  8. Change Position: Change the position of the tool on the current page
  9. Move: Change the location of this tool to another page by selecting the desired category and page
  10. Preview: Opens a new tab to preview the page
  11. Delete: Deletes the tool from the page

Add Slide Show Image

SS_7.jpg

  1. Position After: Select the position of the photo in the slideshow.
    1. Add/Update Image: Opens a window to upload, resize, and crop the image. See the Add Image section below for detailed instructions
    2. Image Hyperlinked to Web Address: Will open the entered URL when the image is selected.
    3. Alt Text: Provides additional information when hovering over the image.
    4. Description/Caption: You can enter additional information about the photo if desired.
  2. This list will be repeated for the number of photos you selected to add. Select Add to add the images to the slideshow.

Add Image

Upload Image

After selecting Add/Update Image on the Add Slide Show Image screen, the Upload Image window opens.

SS_8.jpg

  1. Choose File: Select to browse to the desired image.
  2. Select Upload Image once the correct image has been selected.

Resize Image

Depending on the size of the image selected, this window may be very large. Use the black bar at the top of the window to drag the window so that the top left area of the window is visible. You can also zoom out on your browser to see more of the window.

 

SS_9.jpg

  1. Image properties for the slideshow
  2. Image current dimensions
  3. The options of Exact Image Resize (recommended), Auto (Width) Image Resize, and Resize image to Width are available.
    • Exact Image Resize:  Image will be resized to the exact/possible set max dimensions. Some images might require width or height cropping to the exact set max dimensions.
    • Auto (Width) Image Resize: If the image is larger than the set max width (in this case 400), it will be scaled down accordingly and might result in a smaller height than the set max height.
    • Resize image to Width ______ and Height _____ with Constrained Proportions.
  4. Select Resize Photo

Crop Image

SS_10.jpg

When Exact Image Size is chosen, the image appears. If cropping is needed, an outline will appear displaying the proportions of the properties of the slideshow.  This outline can be moved include the area you wish. Select crop to crop to the desired area and the appropriately cropped photo displays.

Options

SS_11.jpg

To accept the image, click Options in the top right and choose Set Image/Done & Close. You can also upload a new image to replace the current image or cancel if desired.

After selecting one of the options, you will be brought back to the Add Slide Show Image where you can continue to fill out fields and add additional images.

Add Slide Show Video

To add video to a slide, an Embed Audio/Video tool must be added first.  This tool can be located anywhere on your website but is often added to the same page just to simplify things. See the Embed Audio/Video Tool article for more instructions on adding this tool.

Select Update on a photo, to add a video to the photo, or add a new photo. The Update Slide Show Images screen or Add Slide Show Image screen will open.

SS_12.jpg

  1. Add/Update Image: Add an image that pertains to the video.
  2. Display a Video: Select this checkbox. After the Display a Video checkbox is selected, a Select Video dropdown list will appear with all available videos.
  3. Select Video: Choose the appropriate video from this list.
    Note: If the Embed Audio/Video tool doesn’t have a tool heading it will display the Tool Number in the drop-down list.
  4. Scroll to the bottom and click Update/Add.

Slide with Video

A slide with a video attached will display with the triangle play symbol on the picture. Clicking on the triangle will open or start the video depending on the embed code settings.

SS_13.jpg

There will be an X on the right side of the video, that when hovered over will show “Close X”. When this is selected, the video will close and the slideshow will continue.

SS_14.jpg

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.