SharePoint 2007 / 2010 - Silverlight Slide Show Web Part for Images and Videos

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.

Acknowledgements

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.

Installation Overview

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.

Debugging

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.

Deployment

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"?>
<access-policy>
  <cross-domain-access>
    <policy>
      <allow-from http-request-headers="*">
        <domain uri="*"/>
      </allow-from>
      <grant-to>
        <resource path="/" include-subpaths="true"/>
      </grant-to>
    </policy>
  </cross-domain-access>
</access-policy>

Configuration

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.

Supported Formats

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

Based on the web you pick, the list will be populated with Picture Libraries and/or Asset Libraries.

Screenshots (SharePoint 2010)

Slide Show View

Slide Show View – On Mouse Over
Slide Show View – Mouse Hover



Album View

Source Code

SkyDrive – SharePoint 2008 / SharePoint 2010
http://cid-a2379f7b2ea6f936.office.live.com/browse.aspx/Public/Projects/SharePoint/SharePoint%20SlideShow

 

References

CodePlex – Vertigo Slide.Show – Original Source Code for Samples and SlideShow projects. This is a great place for understanding the features and troubleshooting issues.
http://slideshow.codeplex.com

Building Blocks #1: Silverlight Slideshow Viewer for SharePoint  - Matthew provided the original SPDataProvider class that I borrowed from heavily.
http://www.ableblue.com/blog/archive/2010/03/08/building-blocks-1-silverlight-slideshow-viewer-for-sharepoint.aspx

Supported Media Formats, Protocols, and Log Fields – Silverlight compatible video formats
http://msdn.microsoft.com/en-us/library/cc189080(VS.95).aspx

BitMap Image Class – Silverlight compatible image formats
http://msdn.microsoft.com/en-us/library/system.windows.media.imaging.bitmapimage(v=vs.95).aspx

Making a Service Available Across Domain Boundaries – Information on clientaccesspolicy.xml. I also recommend Jesse Liberty and Tim Heuer’s blogs.
http://msdn.microsoft.com/en-us/library/cc197955(v=vs.95).aspx

WSPBuilder – Visual Studio Extension required by the SharePoint 2007 project.
http://wspbuilder.codeplex.com