YouTube Video Gallery in SharePoint 2010

Uncategorized 2 Minutes

During one of our engagement we had a requirement for one of our customers to build video galley on SharePoint

The video galleries are created based on SharePoint content type as backend storage and content Query web part mixed with JQuery features to represent the video/images as sliding objects, the following diagram shows the high level design of the solution

 

image

First you have to create the following content types as follows:

1. Video Album

Custom content type that inherit from folder content type with the following properties :

  • Video Album cover image

2. YouTube Video

Custom content type that inherit from list item content type

  • Youtube thumbnail URL
  • youTube Video URL

 

image

 

Assign the content type to SharePoint list, name it as video gallery

image

Now you can add video albums and youtube videos into the video gallery list

image

image

 

Now once the backend is setup and filled with videos and albums we need to setup the UI part using content query web part located in codePlex http://imtech.codeplex.com/releases/view/39782 this web part supports paging and custom XSLT styles:

image 

we used the JQuery sliding gallery called pikachoose http://www.pikachoose.com to display the videos located in video gallery ,once a user clicks on specific album we open popup that display the videos located in video album as sliding objects ,video album name is passed in query string to filter the videos based on the clicked Album,we created a custom content query web part to reference the needed script files ,CSS and XSLT and the most important to filter based on the passed query string , we inherited the normal content query as follows:

public class CustomCQWP : Microsoft.SharePoint.Publishing.WebControls.ContentByQueryWebPart

{

Then added the needed properties as follows,here am listing two of them

        [Personalizable(PersonalizationScope.Shared)]

        [WebBrowsable(true)]

        [WebDisplayName("Custom CAML")]

        [Description("")]

        [Category("Custom")]

        public string CustomQueryString { get; set; }

 

 

        [Personalizable(PersonalizationScope.Shared)]

        [WebBrowsable(true)]

        [WebDisplayName("Parameter Name")]

        [Description("")]

        [Category("Custom")]

        public string ParameterName { get; set; }

Then add the properties using

public override ToolPart[] GetToolParts()

{

ArrayList res = new ArrayList(base.GetToolParts());

res.Insert(0, new CustomPropertyToolPart() { Title = "Custom" });

return (ToolPart[])res.ToArray(typeof(ToolPart));

}

Then in CreateChildControls we used the query string to filter the data from the list

if (string.IsNullOrEmpty(ParameterName) == false){

string value = HttpContext.Current.Request.QueryString[ParameterName];

if (SPContext.Current.FormContext.FormMode == SPControlMode.Display)

{

Properties shown as follows in web part properties

image

image

We registered the CSS links and JS links as follows:

HtmlHead head = (HtmlHead)Page.Header;

HtmlLink link = new HtmlLink();

link.Attributes.Add("href", Page.ResolveClientUrl(CSSPath));

link.Attributes.Add("type", "text/css");

link.Attributes.Add("rel", "stylesheet");

head.Controls.Add(link);

if (string.IsNullOrEmpty(JavaScriptPath) == false)

Page.ClientScript.RegisterStartupScript(this.GetType(), "CustomCQWPJS", @"");

Now the gallery retrieves the objects from the backend list and display for users as gallery

image

Author

Published