Learn how to create a revolving image slideshow for an addition to your homepage. This involves understanding Components, Collections, and Inline Edit.

Before choosing your images, make sure they:

Support your Content: The key rule right here is that your images should fit your content material or the mission of your website.

Support the Brand: Both UVA and the Health System offer image libraries where you can download images for use on your website.

Are High-Quality: The larger your image, the greater the effect will have on users. In addition, don't forget the technical elements, choose a broad and high-quality picture. It's embarrassing to have a blurred picture on your web page.

Steps for Creating a Slideshow Banner

After you have selected the images you want to use for your slideshow banner, follow the steps below to incorporate them into a banner for your page.

Upload Images
  1. Create a folder called "_slideshow-images" for example, at the root (directly under Home) in your site's contents area.
  2. Add the images to the folder. Click the three (3) dots next to the slideshow banner folder -> add Content -> Quick Upload.
  3. Drag & Drop files OR click the button "Add Files"
  4. The images with additional attributes will display. BE SURE to complete at least the Alt Text for accessibility. The Alt Text will read out loud via a screenreader to persons with disabilities.
  5. Click Upload to complete importing the banner images into your site's contents.
Create a Collection
  1. Using Mura's left side toolbar, click "Collections".
  2. There are two types of collections - Local Index (aggregating content from your site) / Remote Feed (aggregating content from an external site/source).
    For the purpose of the slideshow banner, click "Add Local Index".
  3. Complete the fields:
    1. Name: provide a name that describes the collection's function. For example "Slideshow Banner Images". (NOTE: remember this name. You will use this same name in the next section.)
    2. Sections Pulled From: You will look for the folder name you used to upload the banner images following the above section. For example, if you named the folder "_slideshow-images", click the button "Select Section". A search box will appear. Type the name of the folder where you stored the banner images. In this case, "_slideshow-images". Click the search icon (DO NOT press Enter on your keyboard).
      1. Click the plus (+) symbol located to the left of the file path (+ Home -> _slideshow-images) to finalize your selection and add it to the collection.
    3. Sort By: default is set to "Last Updated". In the case of banner images, you may want to change it to Manual Order. This means that how the images are sorted in their folder in the order they will be presented.
    4. Sort Direction: Ascending or Descending
    5. Max Items: the default is set to 20. This is plenty for the case of banner images. You probably don't want to have more than 5 images.
    6. Included Items (three yes/no questions). Best to leave these set to default. For more information about these, please refer to the Collections section.
    7. Click the button "Add" located at the bottom to save this collection.
Create a Component
  1. In the site's contents, there are three (3) buttons above the site contents table. These buttons are labeled - Site / Components / Forms. Click "Components".
  2. Create a Component: Click the three (3) dots next to Components and "Add Content". Click to choose "Section Slideshow".
    1. Name: provide a name that describes the component's function. For example "Slideshow Banner". Note: remember this name. You will use this to add it to the page in the next section.
    2. Where would you like to use this component?: keep it set at the default - content.
    3. Slideshow Title: This title is displayed in a bar over the image. Keep this short.
    4. Collection Feed Name: This is the name you gave the collection in the above section. In this case, "Slideshow Banner Images". (NOTE: be sure the title name matches exactly)
    5. Display the Slideshow Title: Title given in #3, do you want to show it?
    6. Slideshow Title Bar Color: If you do want to show the title, what color do you want the title bar?
    7. Display the Slideshow Caption:
    8. Display the Slideshow Indicators: After a period of time (set in #10), the slideshow will rotate through the images. Do you also want to show left and right arrows for users to bypass the rotation and advance to the next image?
    9. Slideshow Image Size: How tall do you want the image banner? Horizontal width will remain the same, but you can control the vertical height of the images.
    10. Slideshow Interval Length (in microseconds): How long do you want users to wait until the image slides to the next. 1 second = 1000 microseconds.
    11. Autoplay Slideshow: do you want the slideshow to autoplay soon after the user loads the page or do you want the user to control the slideshow. Typically, you will want to keep this turned on by setting it to True.
  3. Click "Publish" to save the component.

Add Slideshow to Web page

Now that you have all the pieces in place for the slideshow, the following steps will demonstrate how you can add it to a web page. In this example, we will be working on the site's homepage.

Change Template for Page
  1. Go to your site's contents and look for your top root file called Home. This is your homepage.
  2. Edit Home.
    Before proceeding and if the content is already on your home page, you will want to copy the content and paste in Word, for example. Proceeding through the next steps will turn off the content ONLY if the template for the page needs to be changed.
  3. Click on the Tab - Layout. By default, editing a page puts us in the Basic tab.
  4. Change the Layout Template to: 1_column_component.cfm
Saving You Page to Draft
  1. To save changes, BUT not go live, click "Save Draft". Publishing now will display an empty page.
    1. You may receive an alert asking you if you want to continue with editing. Clicking "No" will save the page. Clicking "Yes" will move you back to the Basic Tab.
      Once your page is in Draft, it is important to note which version you are editing. Going back in to edit a page that has a draft version, will provide an alert asking which version you want to edit. Be sure you are selecting Latest Draft each time.
  2. You will need to view your Draft version of the homepage in order to proceed through the next steps. To do this, Edit the Latest Draft version, scroll to the bottom, and click the button Preview. You may receive an alert from your browser to allow for the "pop up". Once you've granted permission, the preview of your page will open in a new tab. You will simply see the site's Header and Footer, but no content.
Add Slideshow Component via Inline Edit
  1. Through Inline Edit, you will add the Slideshow Banner component to the page in Preview. Please reference instruction for Accessing Display Objects (components are one several display objects) via Inline Edit.
    1. Click and drag "Component" from the Inline Edit Panel over to the center of the Home page. You will see a green circle with a plus (+) sign indicating that the component can be "dropped" on the page - and release to drop the component on the page.
    2. In the Inline Edit Panel, you will see the Component properties. Under Basic, select the name you gave the component. In this case, "Slideshow Banner".
    3. You will see a preview of the slideshow banner on the page.
    4. From the top Frontend Toolbar, click the blue button "Save" -> "Save Draft". Remember, without content, this page is not yet ready to be published.
Add Other Display Objects to Support Your Content Needs
  1. Continue with building out the page with your content by adding Display Objects via Inline Edit. Please refer to Inline Edit Display Objects for details.
Publish the Draft
  1. Once you have finished building the page and ready to publish. Edit the Latest Draft version and scroll to the bottom and click Publish.
  2. You will see an alert - "IMPORTANT: By publishing this content all unpublished drafts will be removed." Simply put, it will publish this latest draft version and delete all the previous draft versions. Click OK.
  3. Your page is no longer in Draft and releases a newly published version.