Slide Show Tool – 4Schools Help Center

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.

Add Slide Show

After clicking add the Slide Show screen will open.

Slide Show Order: Select to show the slides in the order they are listed or randomly
Seconds Between Slides: Default is 4 seconds, but this can be changed as desired.
Maximum Height For Photos: Default height is 267 pixels, but keep in mind that if your site may have customized with predetermined values.
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.
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

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.
Add: Use the drop down to choose the numbers of photos and then select add to open the Add Slide Show Image screen.
Slide Show Properties: Select to update any of the Slide Show tool properties.
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.
Image Status: Select to change the status of the image to active or inactive
Update Image: Select to make changes to the image
Delete Image: Select to delete the image
Change Position: Change the position of the tool on the current page
Move: Change the location of this tool to another page by selecting the desired category and page
Preview: Opens a new tab to preview the page
Delete: Deletes the tool from the page

Add Slide Show Image

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.
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.

Choose File: Select to browse to the desired image.
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.

Image properties for the slideshow
Image current dimensions
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.

Select Resize Photo

Crop Image

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

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.

Note: The slideshow tool creates a space on the page that is as large as the largest dimensions of the images in the slideshow. If you have images that are different sizes the smaller images will display within the space of the larger 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.

Add/Update Image: Add an image that pertains to the video.
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.
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.
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.

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.