Slideshow 9 Instructions

The ‘Slideshow’ panel displays a slideshow of full-width images and/or videos to provide the visitor with a visually-engaging introduction to your school or district. This is supported by a row of eye-catching icon buttons. 

The panel consists of the following key features housed within a single Container element:

• Slideshow: A autoplay slideshow of large images and/or videos powered by a single Resource element with arrow buttons and a play/pause button toggle. This is set to display resources from the ‘Home Hero Slideshow Panel’ gallery by default.

  Each slide within the slideshow includes a supporting text area displaying an optional title and description (inclusive of an optional button). This content provides further insights into your key messages and encourages the visitor to find out more.

• Icon Buttons: a row of up to 8 icon buttons linking to important pages and resources on your website. Each button consists of a customizable icon in gray (that can be selected from an icon library uploaded to your website) and a supporting text label.

  The icon buttons are powered by a single Navigation element displaying pages from the ‘Font Icons’ branch in the ‘Pages’ panel. Each page in this branch represents a different icon button and can be set to redirect to a page of your choosing.

The elements in this panel are configured with the following settings:

Panel Container Element

Resource Element

Icon Buttons Container Element

Navigation Element

Important: When updating the elements in the ‘Slideshow’ panel, please only update the settings recommended across these instructions. All other settings have been configured to ensure the panel displays with the correct presentation and functionality.

The following pixel dimensions are recommended for the images and videos uploaded to the Resources module for this panel. Please follow these guidelines to achieve an ideal balance of high visual quality and efficient loading times with your content:

The slideshow in the ‘Slideshow’ panel is powered by a single Resource element. By default, this has been set to show resources all resources from the ‘Home Hero Slideshow Panel’ gallery.

To change the gallery of resources on display within the slideshow:

1. Go to the ’Pages’ panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Slideshow’ panel.
5. Hover over the Resource element displaying the slideshow and click on the ‘gear’ icon in the top-right corner.
6. With the ‘Slideshow’ tab selected in the ‘Edit Resource Element Settings’ window, click on the ‘Browse’ button directly below the ‘Title’ field.
7. Select the desired gallery to display in the ‘Select a Gallery’ window.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

Important: When updating this Resource element, please only update the settings recommended in these instructions. All of the other settings have been configured to ensure the slideshow displays with the correct presentation.

Note: These instructions detail the steps required to display an existing gallery of resources within the Slideshow panel. To learn more about adding galleries in Composer please read our Knowledge Base article on how to organize resources into Galleries.

By default, the title and description for each image and/or video in the slideshow will display automatically along the bottom of each slide. You may optionally show or hide this title and description.

To hide the title and description within each slide:

1. Go to the ’Pages’ panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Slideshow’ panel.
5. Hover over the Resource element displaying the current image or video and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ All’ in the ‘Edit Resource Element Settings’ window.
7. To hide the title for each slide, set the ‘Display Resource’ field to ‘None’.
8. To hide the description for each slide, uncheck the ‘Description’ checkbox.
9. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’’ window.

To show the title and description within each slide if it has previously been hidden:

1. Go to the ’Pages’ panel and select the homepage.
2. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.
4. Scroll to the ‘Slideshow’ panel.
5. Hover over the Resource element displaying the current image or video and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ All’ in the ‘Edit Resource Element Settings’ window.
7. To show the title for each slide, set the ‘Display Resource’ field to ‘Title’.
8. Make sure the ‘Display Title’ field is set to ‘Below Resource’. 
9. To show the description for each slide, check the ‘Description’ checkbox.
10. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’’ window.

To add a new slide to the slideshow in the ‘Slideshow’ panel, begin by uploading an image or video for it to the Resources module:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Resources’ tab.
3. Select the folder containing your slideshow images and videos in the ‘Public’ directory. 
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface
5. Choose from the upload options available and upload a new image or video.

Once the upload is complete, update the following properties in the ‘Edit Resource Details’ window to setup the optional supporting content for the slide and to add an alternative description for the image or video thumbnail:

1. Optionally click into the ‘Title’ field to add a short title for the image or video. This will display on the page as a large title at the bottom-left of the image.
2. Optionally click into the content editor in the ‘Description’ field to add a text description and button. This content will display below the title overlaying the bottom-left of the hero:
   1. Type a short text description that relates to the image or video. We recommend adding a single paragraph with a maximum of 30 words to ensure the description displays effectively within the slide.
   2. Press the return key and type in a short label for the button.
   3. Highlight the button label with your cursor.
   4. Click on the ‘Link’ icon button in the content editor toolbar.
   5. Choose ‘Add Link’ from the dropdown list
   6. Select a link type from the top of the ‘Link’ properties window.
   7. Configure the link settings and make sure that the ‘Open link in a new tab’ checkbox is checked if the link opens a document or a page on an external website.
   8. Click on the ‘OK’ button at the bottom of the ‘Link’ properties window.
   9. Click on the ‘Save’ button at the bottom of the ‘Edit Content Element Settings’ window.
3. If you are uploading an image, click into the ‘Alt Text’ field and add a short description of the image. This is used to describe the image in situations where the visitor cannot see it and is highly recommended to improve the image’s accessibility. If you are uploading a video, add a short description to the ‘Thumbnail Alt Text’ field.
4. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Finally, add the image or video to the Resources Gallery powering the slideshow:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Galleries’ tab.
3. Select the Resource Gallery powering your slideshow under ‘Public Galleries’. 
4. Click on the ‘Add Public Resource' button at the top-right of the gallery interface.
5. Select the image or video you have previously uploaded and add it to the gallery.
6. Optionally drag and drop the image or video within the gallery interface to reorder its position within the slideshow.
7. Click the ‘Update’ button at the bottom-right of the Gallery interface.

Once the gallery has been updated, the new image or video will display in the slideshow panel automatically.

Note: To optimize loading speeds, the slideshow will display a maximum of 20 slides on the homepage. Videos set to autoplay are also limited to 30 seconds in length, at which point the slideshow will advance to the next slide. 

To learn more about image and video best practices, please refer to the ‘Image & Video Best Practices’ sections in the ‘Website Overview’ section.

The order of the slides within the slideshow in the ‘Slideshow’ panel is based on the order of the images and/or videos within the Resources Gallery that powers this content.

To reorder the slides:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Galleries’ tab.
3. Select the Resource Gallery powering your slideshow under ‘Public Galleries’.
4. Drag and drop the image or video within the gallery interface to reorder its position within the slideshow.
5. Click the ‘Update’ button at the bottom-right of the gallery interface.

Once the gallery has been updated, the images and/or videos you have reordered will display in the updated order.

To remove an existing image or video from the slideshow in the ‘Slideshow’ panel:

1. Click on the ‘folder’ icon button in Composer’s left navigation to access Resources. 
2. Click on the ‘Galleries’ tab.
3. Select the Resource Gallery powering your slideshow under ‘Public Galleries’.
4. Hover over the image or video you want to remove and click on the ‘check’ icon. This will select the file and open the ‘Resources Selected’ panel on the right of the gallery interface.
5. Click the ‘Remove from Gallery’’ button in the ‘Resources Selected’ panel.
6. Click the ‘Update’ button at the bottom-right of the gallery interface.

Once the gallery has been updated, the images and/or videos you have removed from the Resources Gallery will no longer display in the slideshow.

Note: Removing images or videos from a Resources Gallery will remove them from the ‘Slideshow’ panel, but the files themselves will still exist in the Resources module in case you want to use them again in the future.

To add a new icon button to the row of Icon Buttons, begin by choosing an icon for it:

1. Open the Finalsite Icon Library webpage in your browser.
2. Choose an icon from this library and make a note of the name directly below it.

Next create a new page for the icon button:

1. Return to the ‘Pages’ panel.
2. Hover over the ‘Font Icons’ branch and click on the three-dot icon.
3. Select ‘New Page’ from the Action menu.
4. Click on the ‘Linked’ tab in the ‘New Page’ window.
5. Click into the ‘Page Name’ field and replace ‘New Page’ with a short title for the icon button.
6. Check the ‘Linked Page’ checkbox.
7. Setup a redirect link to the desired webpage:
   1. If the linked page is part of your website, select ‘Internal Redirect’ and click the ‘Select Page’ button to choose the page.
   2. If the page is external to your website, select ‘External Redirect’ and type the full URL of the page into the ‘Redirect to this page’ field.
8. If the link redirects to an external webpage, check the ‘Open in a new Window’ checkbox. This is a recommended best practice when linking to external websites.
9. Click the ‘Save’ button in the ‘New Page’ window to create the page.

With the new page selected in the ‘Pages’ panel, complete the process by hiding it from search engines, applying the icon and choosing the position of the icon button within the icon panel:

1. Click on the ‘gear’ icon in the bar at the bottom-right of the page interface.
2. Check the following checkboxes under the ‘General’ tab in the ‘Page Settings’ window to prevent the icon button itself from displaying as a page in search results:
   1. Hide from internal site search
   2. Hide from external search engines
3. Click into the ‘Custom Nav Class’ field towards the bottom of the ‘Page Settings’ window.
4. Type the icon custom class that you noted earlier into the ‘Custom Nav Class’ field. Please follow the exact format specified with all characters in lowercase with a hyphen between words (for example, ‘icon-apple’).
5. Click the ‘Save’ button in the ‘Page Settings’ window.
6. Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the new icon button will display in the icon panel automatically.

Important: The icon panel supports a maximum of 8 icon buttons. Adding more than this may result in the panel displaying incorrectly.

To update an existing icon button in the Row of Icon Buttons, begin by choosing a new icon for it:

1. Open the Finalsite Icon Library webpage in your browser.
2. Choose an icon from this library and make a note of the name directly below it.

With your new icon selected, next update the title and link destination for the icon button:

1. Go to the ‘Pages’ panel.
2. Open the ‘Font Icons’ branch and select the page representing the icon button you want to update.
3. Click on the ‘gear’ icon in the bar at the bottom of the page interface.
4. Click into the ‘Page Name’ field and update the title for the icon button.
5. Click on the ‘Linked’ tab at the top of the ‘Page Settings’ window.
6. Check the ‘Linked Page’ checkbox.
7. Setup a redirect link to the desired webpage:
   1. If the linked page is part of your website, select ‘Internal Redirect’ and click the ‘Select Page’ button to choose the page.
   2. If the page is external to your website, select ‘External Redirect’ and type the full URL of the page into the ‘Redirect to this page’ field.
8. If the link redirects to an external webpage, check the ‘Open in a new Window’ checkbox. This is a recommended best practice when linking to external websites.

With the ‘Page Settings’ window still open, apply your new icon:

1. Click into the ‘Custom Nav Class’ field towards the bottom of the ‘Page Settings’ window and delete the current class.
2. Type the icon custom class that you noted earlier into the ‘Custom Nav Class’ field. Please follow the exact format specified with all characters in lowercase with a hyphen between words (for example, ‘icon-apple’).
3. Click the ‘Save’ button in the ‘Page Settings’ window.
4. Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page has been published, the updated icon button will display automatically.

The order of the buttons in the row of Icon Buttons is determined by the order of the pages within the 'Font Icons’' branch in the 'Pages' panel.

To reorder an icon button:

1. Go to the ’Pages’ panel.
2. Open the ‘Font Icons’ branch.
3. Drag and drop the page representing the icon button you want to move into the desired new position.

Once the page has been moved, the icon buttons will display in the updated order automatically.

To remove a button from the row of Icon Buttons you can either delete the page representing it from the ‘Font Icons’ branch (to remove it permanently) or set the page to be hidden from Navigation elements (in case you want to display it again in the future).

To delete the page representing the icon button:

1. Go to the Pages panel.
2. Open the ‘Font Icons’ branch.
3. Hover over the page representing the icon button you want to remove.
4. Click on the three-dot icon and select ‘Delete’ from the Action menu.
5. Confirm you want to delete the page in the ‘Delete Page’ validation window.

To hide the page representing the icon button:

1. Go to the Pages panel.
2. Open the ‘Font icons’ branch.
3. Select the page representing the button you want to hide.
4. Click on the ‘gear’ icon in the bar at the bottom-right of the page interface.
5. Check the ‘Hide from navigation elements’ checkbox within the ‘General’ tab in the ‘Page Settings’ window.
6. Click the ‘Save’ button in the ‘Page Settings’ window.
7. Click the ‘Publish’ button at the bottom-right of the page interface.

Once the page representing the icon button has been published with the updated settings applied, the icon button will be removed from the icon panel automatically. 

Note: To display an icon button that has been hidden previously, follow the same set of steps above, but uncheck the ‘Hide from navigation elements’ checkbox during step 5.