SharePoint Information Site > Web Parts > Slideshow > Instructions

Instructions

As always, log in to edit the page in SharePoint by clicking Editor Login in the bottom right corner of the page, and enter your Campus Connect username and password. Next, click the Edit symbol at the top of the page, or go to the Page tab and click Edit. If the ribbon does not appear, you can access it through the Site Actions dropdown by selecting Show Ribbon, or edit the page directly from the dropdown menu.

First you will need to make sure the image(s) you want to place in the slideshow are properly sized before uploading them to SharePoint. If you are using the slideshow on your website's homepage or any full-width page, the image(s) should be 1900px by 530px. For interior pages, we recommend using the Photo Gallery Web Part.

Inserting a Slideshow

1. Go to the Insert tab in the ribbon, and click on Web Part.

2. Select Slideshow, and click Add.

3. Click Configure Webpart, and choose either Default SlideShow or SlideShow Content Right. (See the two options side-by-side on the Slideshow landing page.) Click OK.

4. In the web part, click on the triangle in the upper right-hand corner. A menu will drop down, and you'll select Edit Web Part. Here is where you'll find options to Auto Advance, Loop to the Beginning, Show Next/Previous Arrows and more. Once you've selected your settings, click Apply and then OK

5. Select Add New Item and under Image, browse for the image in the SharePoint images library (or click Upload in the upper left-hand corner to upload an image from your computer into SharePoint). The image size requirements will depend on if you're using the web part on a home page or two-column layout. (Note: Slideshow should never be used in a three-column layout.) See the Photo Best Practices guide for more information.

Under Image Title, create a title for the image. (This will not be outwardly displayed, but is necessary for ADA standards.) Under Main Content, type a caption or information about the image to be displayed as an overlay. Click OK.

5. Add additional images by selecting Add New Item and following the instructions in Step 4. To delete a slide, just click Delete Item.

6. In the ribbon hit Save & Close to save your work and see how the slideshow will look. You may continue editing, or if you are pleased with the slideshow, click Check In in the ribbon. Publish the page when you are ready.

Before you leave a page, always Save & Close and Check In the page.


Step-by-step Image Guide

Click in the Main Content area, and in the ribbon click the Insert tab.

Insert webpart
Click Web Part.
Choose Slideshow Web Part, and click Add.

Click Configure Webpart, and choose either Default SlideShow or SlideShow Content Right. (See the two options side-by-side on the Slideshow landing page.) Click OK.

In the web part, click on the triangle in the upper right-hand corner. A menu will drop down, and you'll select Edit Web Part. Here is where you'll find options to Auto Advance, Loop to the Beginning, Show Next/Previous Arrows and more. Once you've selected your settings, click Apply and then OK
Click on Add New Item.

Add a title. (This will not be outwardly displayed but is necessary for ADA standards.) Click on "Click here to add new content" to add a caption, and then browse for an image.

Note on Main Content: This field is an HTML field so you are responsible for styling. If you are using Slideshow Content Right, below is the markup you should use. (In the ribbon, in the Format Text tab, go to HTML > Edit HTML Source in Rich Text Editor and then paste the following markup in the HTML field.)

View Markup



<h3>Your headline goes here</h3>

<hr/>

<p>Your teaser sentence goes here.</p>

<p><a class="cta-type1 cta-light-blue medium" href="#">Call to action goes here. Replace # with target link.</a></p>



Browse for the image in the Images folder or Upload one from your computer. (See the Photo Best Practices guide for size requirements.) Then select the image, and click OK.
Click OK to close the window.

Now the web part should look like this:
Add more items following the steps above, and when you're ready Save & Close and Check In the page.


Watch the instructional Video for the Slideshow Web Part​.