For those familiar with SharePoint 2007, you know that a slide show web part is nonexistent and in order to get this functionality you would either have to resort to a 3rd party web part or do some custom web part development. SharePoint 2010 does provide some out of the box web parts like the Picture Library Slide Show Web Part and the Media Web Part, however these do have limitations. Neither provide the ability for albums, the ability to mix video and images, or full screen functionality. The Media Web Part also only allows a single video to be embedded. Furthermore, getting the web part’s width and heights properties to render properly can be challenging. This web part mitigates all of these issues and provides the following functionality:
- Web Part Configuration – Using out of the box SharePoint functionality, you can simply add this web part to a web part zone. The web part properties are context sensitive and will display appropriate SharePoint webs and Picture Libraries and Asset Libraries that can be used for the slide show.
- Mixed Media – This slide show web part allows video and/or images within slide shows.
- Album View– An album view allows you to create multiple albums within the slide show. Albums are based on the SharePoint library’s root level folders.
- SharePoint 2007 and 2010 Compatible – I have created two projects since each platform has different deployment requirements and other subtle differences.
- Embed Slide Show – If you have non SharePoint web pages, the slide show has a feature that allows you to easily copy and paste HTML code to be used for embedding in other web sites.
- Full Screen Mode – Any slide show can be viewed in full screen mode simply by clicking a button on the web part.
- Other – For a full list of slide show features, see the Slide.Show link in References below.
This web part was based on the popular and open source Vertigo Slide.Show project in CodePlex, which also has an XML and Flickr data provider. All images used within the screenshots below can be found within the CodePlex source code. For the SharePoint data provider code, I made just a few changes to the code provided in Mathew McDermott’s blog post on the subject. See References below for more details.
I am not going to provide complete instructions here as both projects will use standard deployment steps, but I have outlined a few things that you should probably know.
Visual Studio Solution and Projects
When you open either solution, you will see that there are three projects: Samples, SlideShow, and SharePoint20xx.CustomControls. The Samples and SlideShow projects are a customized versions of Vertigo’s Slide.Show CodePlex source code. The SlideShow project is the Silverlight project and has been changed to add the SPDataProvider code, remove some of the out of the box branding, and a few other minor changes. I have also created post build events that copy the XAP file to the SharePoint20xx.CustomControls project since this is used by the web part. In this project, the most important file is the SPDataProvider.cs file. If Vertigo provides an update to the CodePlex project, you could copy this over and rebuild the project. Just make sure that the XAP file makes it way into the Web Part project. The SharePoint20xx.CustomControls contains all of the Web Part specific information and deploys the XAP and a png file to the SharePoint hive within CONTROLTEMPLATES\SharePoint20xx.CustomControls directory. The XAP file contains all of the Silverlight code and the png file is used for video thumbnails. (SharePoint actually has one, but since it is a GIF file and thus unsupported by Silverlight.) You may also want to change things like the elements.xml file as I kept the name and group of the web part generic.
The best way to debug is to set the Samples project as your StartUp project and the default.html page in the SharePoint folder as your Start Page in Visual Studio. Be sure to open the default.html file first and change the Web and List parameters appropriately. In order to play with the XML data providers, you are also going to need to download the original CodePlex project and add the Samples project’s Assets folder. This has an excellent collection of Silverlight compatible images and videos, but I have removed them from the download as they took up too much space.
For either 2008 or 2010 projects, you can simply use STSADM and the WSP file. If you are a development machine, you can use WSPBuilder for 2008 or for 2010, Visual Studio 2010. The SharePoint 2008 source code utilizes Visual Studio 2008, WSPBuilder extensions, and Silverlight 2.0 development tools. You are welcome to use Silverlight 3.0 or 4.0 development tools as well, but will be prompted to upgrade the project. The SharePoint 2010 source code was developed in Visual Studio 2010 and Silverlight 4.0 development tools. Once you have deployed the feature, you will need to make sure it is activated on the site it has been deployed at. Once the feature has been activated, it can be added as a web part, by default under Custom Controls –> Silverlight Slide Show.
Silverlight / SharePoint Cross Domain Requirements – IMPORTANT!
In order for Silverlight to access SharePoint web services (“Lists.asmx” in this case), you will need to create a file called clientaccesspolicy.xml and save it to the SharePoint wwwroot directory (C:\inetpub\wwwroot\wss\VirtualDirectories\80). You can find a copy of this in the Slide.Show Sample project or use the text below. See References below for more details.
<?xml version="1.0" encoding="utf-8"?>
<resource path="/" include-subpaths="true"/>
In order to use the web part, you will first need to create a SharePoint Picture Library where you will be storing your images and/or videos. If you are using SharePoint 2010, you can alternatively create an Asset Library. You can then add images and videos (wmv format) to the library. In order to create albums, you can create folders at the root level. The name of the folder will be the name of the web album respectively. You can also set the Title and Description as these will be used when you mouse over a slide. If you do not provide a Title and Description, the image path will be used. One other minor thing I noticed is that the Title and Description change as soon as the transition starts, so depending on how you set up your Wait Times and Transition durations, it may appear that the these values are wrong. Also, keep in mind that the web part will resize pictures based on the height and width you provide in the web part properties, so it is recommended that you use images of equal size and aspect ratio. In order to configure the web part, open the page in edit mode, click on Modify Shared Web Part from the Web Part Edit drop down.
Silverlight only accepts JPG and PNG for image formats and WMV for video formats. See MSDN References below for more details.
Web Part Configuration Properties
- Web – This is used to filter the lists.
- List – This is the Picture Library that will be used in the slide show.
- Width – Image / Video width. Pictures and videos will be resized to fit this.
- Height – Image / video height. Pictures and videos will be resized to fit this.
- Transition Duration – Time in milliseconds that it takes to transition between slides.
- Wait Time – Time in milliseconds that the slide stays in one place.
- Theme – Theme to be used. Dark and Light are the only two themes.
- Transition Type – These are the types of transitions that can be used between slides.
- Start In Album View – This indicates whether or not you want the web part to default to album view.
Web Part Properties
Screenshots (SharePoint 2010)
SkyDrive – SharePoint 2008 / SharePoint 2010
CodePlex – Vertigo Slide.Show – Original Source Code for Samples and SlideShow projects. This is a great place for understanding the features and troubleshooting issues.
Building Blocks #1: Silverlight Slideshow Viewer for SharePoint - Matthew provided the original SPDataProvider class that I borrowed from heavily.
Supported Media Formats, Protocols, and Log Fields – Silverlight compatible video formats
BitMap Image Class – Silverlight compatible image formats
Making a Service Available Across Domain Boundaries – Information on clientaccesspolicy.xml. I also recommend Jesse Liberty and Tim Heuer’s blogs.
WSPBuilder – Visual Studio Extension required by the SharePoint 2007 project.