SharePoint Information Site > Web Parts > Photo or Video Gallery > 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.

Photo Gallery:

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

2. Select Gallery Web Part, and click Add.

3. Click on Configure Webpart, select Default Gallery Photo and click OK. (Note: For Gallery Video instructions, see below. The Gallery HTML option is for custom development and is not useful outside of special cases.​)

4. Select Add New Item, and enter an Image Title. (The Image Title will not be visible to the average viewer but is necessary for ADA standards.) Then click Browse... and expand the subsite's images library. Look for the image you uploaded in the SharePoint images library (or click Upload in the upper left-hand corner to upload an image from your computer into SharePoint), give the photo a caption (optional), and hit OK.

5. Add additional images by selecting Add New Item and following the instructions in Steps 3 and 4.

6. In the upper right corner of the web part, across from where it says Gallery Web Part, click on the little black arrow to expand the menu. Select Edit Web Part. Now you can choose from several display options. By checking Auto Advance, the gallery will automatically advance to the next image after the designated number of milliseconds. By checking Randomize Slides, the gallery will display the images in a random order each time. By checking Include Thumbnail Index, the gallery will display thumbnails for the images along the bottom of the web part. By checking Loop to Beginning, the gallery will play in a loop, rather than stopping at the last image. By checking Allow Fullscreen Mode, the gallery will have an expand symbol in the upper right corner that when clicked will allow the viewer to see the gallery at full screen width. After you've made your setting selections, click Apply and then OK

7. In the ribbon, hit Save & Close to save your work and see how the gallery will look with the selections you've made. You may continue editing, or if you are pleased with the gallery, hit Check In in the ribbon.

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

 

Video Gallery:

Before you start, go to the video in YouTube or Vimeo and take a screenshot of a nice part of the video (press pause when you see a nice scene and screenshot it). We then suggest opening your screenshot in Photoshop or another image editor to crop it appropriately, resize it to 800px wide and save it as a .jpeg. Leave the YouTube or Vimeo browser tab/window open so you can copy the video URL (do not use shortlinks, be sure to use the full video url — for YouTube it usually has the word "watch" in it).

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

2. Select Gallery Web Part, and hit Add.

3. Click on Configure Webpart and select Gallery Video and click OK (note: for Default Gallery Photo, see above instructions. Gallery HTML is for custom development and is not useful outside of special cases​).​

4. Select Add New Item, and enter an Image Title. (The Image Title will not be visible to the average viewer but is necessary for ADA standards.) Then paste the YouTube or Vimeo URL in the  URL field. You cal also add a caption (optional).

5. Insert an image clicking Browse... and browsing for the thumbnail image screenshot that you uploaded in the subsite's images library (or click Upload in the upper left-hand corner to upload an image from your computer into SharePoint), and hit OK. FYI: Most thumbnail images are simply a screen capture of a scene in the video, but must be a .jpg file.

6. Add additional videos by selecting Add New Item and following the instructions in Step 4.

7. In the upper right corner of the web part, across from where it says Gallery Web Part, click on the little black arrow to expand the menu. Select Edit Web Part. Now you can choose from several display options. By checking Auto Advance, the gallery will automatically advance to the next video after the designated number of milliseconds. By checking Randomize Slides, the gallery will display the videos in a random order each time. By checking Include Thumbnail Index, the gallery will display thumbnails for the video images along the bottom of the web part. By checking Loop to Beginning, the gallery will play in a loop, rather than stopping at the last video. By checking Allow Fullscreen Mode, the gallery will have an expand symbol in the upper right corner that when clicked will allow the viewer to see the gallery at full screen width. After you've made your setting selections, click Apply and then OK. ​

8. In the ribbon hit Save & Close to save your work and see how the gallery will look. You may continue editing, or if you are pleased with the gallery, hit Check In in the ribbon.

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.

 

Click on Web Part.


Choose Gallery Web Part, and click Add.

Click Configure Webpart.
Select Default Gallery Photo or Gallery Video and then click OK.
Click Add New Item.

Give the image a title, and caption (optional) and click Browse.
Select an image from the Images folder or upload one by clicking Upload. Once you've selected the image, click
OK.
Add another item by repeating the above steps. ​Now you'll see the images or videos in the web part.
When all of your images or videos are in the gallery, click the down arrow that appears when you hover over the upper right corner of the web part. Then click Edit Web Part.
Now make your setting selections and click Apply and then click OK.

When you're done, Save & Close and Check In the page.

 



See our Best Practices Guide for more.

​​