Managing Slideshows and Banners on your Website

What Does the Slideshow Module Do?

The Slideshow Module allows you to control the sliding or fixed banner images on the top of all of your website pages. If you only have one image in the Slideshow it will appear as a single banner image.  The Slideshow Module allows you to define slideshows to your website for different areas of different pages.

This section covers:

  • Finding the Slideshow Module
  • Creating a New Slideshow
  • Activating a Slideshow
  • Deactivating a Slideshow
  • Editing a Slideshow
  • Deleting a Slideshow
  • Adding Slides to a Slideshow
  • Settings for a Slideshow
  • Displaying Slideshows on a Page
  • Editing the Slideshow Widget

 

THE SLIDESHOW MODULE

To access the Slideshow Module click on the Modules icon in the top navigation and select "Slideshow" from the dropdown list. You will taken to the Slideshow Administration area which shows all of the slideshows currently on your website.

 

CREATE A NEW SLIDESHOW

To create a new slideshow click on the "Add A Slideshow" Button located in the left hand navigation

  • A new screen will appear as shown below

  • Slideshow Name: Type in the Slideshow Name: This is the name of the Slideshow.
  • Slideshow Type: All slideshow types will be created as Carousel
  • Random Display of Slides: Choose if you with for the Slides to appear in a random order - "Yes" or a fixed order - "No" 
  • Once you have completed the fields, click the Save & Close button.

 

ACTIVATING A SLIDESHOW

  • Once you have added a Slideshow, it will automatically be created as Inactive (therefore the Slideshow will not be available for use on your website). 
  • To make a Slideshow Active, click on the red Activate button of the right of the name. The button will change to green. 

 

DEACTIVATING A SLIDESHOW

  • To make a Slideshow Inactive, (which will mean it will no longer be available for use on your live website) click on the green Activate button to the right of the name.
  • The button will change to red. 

 

EDITING A SLIDESHOW 

  • To edit an existing Slideshow, click on the Edit button, located to the right of the name.  
  • An update Slideshow box will appear with the same fields as the New Slideshow box.
  • Once you have made the relevant changes, click the Save & Close button.

 

DELETING A SLIDESHOW

To delete a Slideshow, click on the Delete button, located to the right of the name. 
A warning screen will appear, click OK to proceed with the deletion.

ADDING SLIDES TO A SLIDESHOW

  • To add a slide to a Slideshow, click on the Slides button, located to the right of the Slideshow name.
  • A new screen for Add A Slide will appear as:

  • Slide Title: This will be name of the Slide, depending on your settings i.e. if you have it set to "Show Titles" this title may appear on the slideshow banner on your live website.
  • Slide Links to: If you want the slide to be clicked and link to another page insert the link into this field
  • Link Behaviour: Choose if you wish for the link above to open in the same window or a new window. 
  • Slide Order: Enter a number to dictate what order the slides will appear in (unless the slide has been set to "Random Display" in which case no number will be required.)
  • Live on Site: Enter a Date that you wish for the slide to start appearing on the site. 
  • Expiry Date: Enter a Date that you wish for the slide to stop appearing on the site. This field is not required, leave it empty if you want the slide to always stay active.
  • Upload Image: Click on the "Choose File" button and browse your computer to find the slideshow image and click "Open". 
  • Resize Uploaded Image Width: tick this box if you wish to resize the image you are uploading.
  • New Width (pixels): Enter the new width you wish to resize the image to in pixels. Your website is 1170px wide and most slideshow images range from 1200px - 1500px. 
  • Upload Thumbnail: Some website themes show the thumbnails as indicators and allow people to scroll between slides. If your theme does this, please upload the slideshow thumbnail image here. Otherwise this field is not required.
  • Slide Description: The Slide Description is a content editor box, depending on your settings this description may appear on your slideshow banner on your live website. For more information on Using the Content Editor and Creating Links & Buttons please see the relevant sections.

Once you have completed the Content, click the Save & Close button.

TIPS ON UPLOADING SLIDESHOW IMAGES

  1. All slides within a slideshow must be the same dimensions or your screen will appear to jump up and down as the website scrolls between them
  2. Large images can impact the performance and page speed of your website, jpg images are typically the preferred file format
  3. You can optimise and compress your images (to make them as fast as possible for users to load) by using third party resources like https://tinypng.com/

ACTIVATING A SLIDE

  • Once you have added a Slide, it will automatically be created as Inactive (therefore the Slide will not appear on your website). 
  • To make a Slide Active, click on the red Activate button of the right of the name. The button will change to green. 

DISPLAYING SLIDESHOWS ON A PAGE

  • Once a Slideshow is added & activated, the Slideshow can be displayed on any page. 
  • To display a Slideshow on a page click on the Widgets button  located to the right of the Page name within Page Administration
  • TIP:  The Slideshow will not appear on your live website until it has been selected (using Widgets) to be displayed on a page.
  •  The Widgets page will show all Widgets that are currently active on the page.
  • To add your Slideshow, click the  button to the top left of the screen
  • Select Slideshow from the left column, and click +Add Widget on the Slideshow you wish to insert on the page. There are different Slideshow Widgets which will display your Slideshow in different positions on the page.
    • Pre-Content Widgets - are positioned at the top of the page, above all page content
    • Centre Widgets- are positioned in the centre of the page, at the end of the page content
    • Post Content Widgets- are positioned at the bottom of the page, below the content, and centre Widgets, but above the site footer.
    • Side Column Widgets- are positioned on the left or right side of the page, beside the page content, and any other widgets on the page. 

?

  • Once you have added the Slideshow Widget, you will see the Slideshow in the list on the Widgets page.

EDITING THE SLIDESHOW WIDGET

  • Once you have added your Slideshow, you can edit the settings and select which Slides will show by clicking the cog icon  at the right of the Widget .

?

  • Complete the fields;
    • Slideshow: Select which Slideshow you would like to display, from the drop down list.
    • Width: Leave this blank as your stylesheet will control the width
    • Height: Leave this blank 
    • Slide Delay: Enter the time in seconds you would like your slides to change
    • Show Slideshow Controls: Check whether you would like the controls to be visible on the Slideshow
    • Show Titles: Check whether you would like the slides to show the titles to be displayed on the slide.
    • Side Controls: Check whether you would like side control arrows to be displayed on your slides.
    • Show Slide Text: Check if you would like the Slide Description (which was inserted you loaded the images) to be displayed with each slide.
    • Use Thumbnails as indicators: Check if you would like thumbnail pictures of the slides to show under the Slideshow. This however may require additional styling and may not work for your theme.
    • Scrollable Indicators: Check if you would like the user to be able to scroll through your slides using their mouse.
  • Click Save. 
  • These changes are live on your Website immediately, so it is recommended you check the Website to ensure the Slideshow is correct.