Walkthrough for SharePoint Server 2010 (ECM): Creating a Customized Home Page and Content By Query Web Part XSL for a Video Sharing Site
Applies to: SharePoint Server 2010
In this article
Make Videos Appear to Float
Creating a Default Image for Videos That Do Not Have a Thumbail Image
Add a Description Element to ItemStyle.xsl
Adding a Rating Display to ItemStyle.xsl
This topic is part four of a five-part series of walkthroughs that teach you how to create and customize a video sharing site.
After you complete the tasks described in Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site and Walkthrough for SharePoint Server 2010 (ECM): Customizing the Video Upload Experience for a Video Sharing Site, you are ready to create a customized home page and a customized Content By Query Web Part (CQWP) XSL that are each designed for sharing, viewing, and managing videos.
Creating the home page and CQWP XSL involves four tasks:
Use a CSS override definition to make the items displayed by the ContentByQueryWebPart object float.
Create a new item style for the ContentByQueryWebPart object.
Create a default image for videos that do not have a thumbnail image.
Add a rating display to the item style.
Adding one or more Content By Query Web Parts (CQWP) to the home page is central to designing a site that maximizes available options for sorting and displaying videos. The CQWP displays a dynamic list of videos; you may choose, for example, to emphasize the most recently uploaded videos, or top-rated videos. This walkthrough demonstates how to create a custom style for the CQWP that is optimized to show videos in a format that emphasizes visual elements such as displaying large thumbnail images, arranging multiple videos per line in a floating layout, and displaying ratings.
In addition to customizing the look-and-feel of the site, you can direct users to a customized display form (as created in Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site) when a video result is clicked. Use the customized display form as an alternative to rendering a MediaWebPart object to play the video file directly, which is the default action that is triggered when a video result is clicked).
Prerequisites
Complete the tasks described in Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site and Walkthrough for SharePoint Server 2010 (ECM): Customizing the Video Upload Experience for a Video Sharing Site.
To create a new style for the CQWP
Start Microsoft SharePoint Designer 2010. On the File menu, click Open.
Navigate to the /Style Library/XSL Style Sheets folder, and then open the ItemStyle.xsl file.
Check out the file for editing, so that you can roll back changes if necessary.
Copy the XSL:Template element and all of its ImageTopCentered contents as a new template in the file. This is necessary because the ItemStyle resembles the existing ImageTopCentered style.
Change the values of the name attribute and the match attribute so that they match the value of the new style name. For example, to change the name attribute to ContosoWithRatings, update the XSL:Template tag as shown.
<xsl:template name="ContosoWithRatings" match="Row[@Style='ContosoWithRatings']" mode="itemstyle">Save the updated ItemStyle.xsl file.
Verify that the style is available by viewing the Web Part Properties pane of any CQWP.
Add the following style attribute to the first <div> tag in the style.
<div class="item centered" style="float:left;padding-left:20px;padding-right:20px; width:160px; height:240px; margin-left:auto; margin-right:auto">
Adding the float attribute and its parameters to the item centered style renders all of the data for each item as centered. Modify the exact pixel values in the code to be the number of pixels that you want.
Make Videos Appear to Float
You can create a custom CSS override definition to make items returned by ContentByQueryWebPart objects float. After you write the code, apply it to every page layout where the CQWP is used, instead of to the XSL itself: changing the XSL affects all CQWP styles, not only those page layouts that apply where the CQWP designed for video is used.
This definition adds a float attribute to the dfwp-item style that the CQWP applies to each item that is displayed.
<style type=”text/css”>
.dfwp-item
{
float:left;
}
</style>
Creating a Default Image for Videos That Do Not Have a Thumbail Image
By default, the style created for the CQWP functions so that a valid preview image URL is defined for each image. Any image that does not have a valid preview image URL does not render correctly. Add logic to the new style so that, if no preview image URL exists, the page displays the default video image that is available by default in SharePoint Server 2010.
Note
Following is the default location for the default video image: http://<server>/_layouts/images/VideoPreview.png
In the stylesheet, wrap the existing <img> tag with an <xsl:choose> statement. The <xsl:choose> statement follows default SharePoint Server 2010 behavior when there is a preview image URL; otherwise, it uses the default image.
<xsl:choose>
<xsl:when test="string-length($SafeImageUrl) != 0">
<img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}"height="120" width="160"/>
</xsl:when>
<xsl:otherwise>
<img class="image" src="http://<server>/_layouts/images/VideoPreview.png" alt="{@ImageUrlAltText}" height="120" width="160"/>
</xsl:otherwise>
</xsl:choose>
Add a Description Element to ItemStyle.xsl
Add a description element to the style by adding markup to the style below the link-item <div> tag. The link-item <div> tag and the the description <div> tag from the Default style in the ItemStyle.xsl file behave almost identically. The description <div> is shown in a small space on the screen, so it cuts off the string after 128 characters. Cutting off the string prevents long descriptions from rendering inline.
<div class="description">
<xsl:if test="string-length(@Description) > 128">
<xsl:value-of select="concat(substring(@Description,1,128),'…')" />
</xsl:if>
<xsl:if test="string-length(@Description) < 128">
<xsl:value-of select="@Description"/>
</xsl:if>
</div>
Adding a Rating Display to ItemStyle.xsl
If you add the ratings customization to the video site, the rating display enables ratings to be displayed for each video. Adding the rating element to the ItemStyle.xsl file is similar to adding the description style. To display the rating with a range of stars from 0 to 5, upload an image file for each value (for a total of six files) to the server. Each file should display a different number of stars. After you upload the images, add logic to show the appropriate image based on the value in the rating field. We recommend that you create a new folder in the site’s Style Library for this purpose.The code sample assumes that all images have been uploaded to a folder named /Style Library/Rating CBQ Images, and that the files are named 0Stars.png, 1Stars.png, 2Stars.png, and so on. If you use different names, update the markup accordingly. In URLs, replace <server> with the name of your server.
<div>
<span id = "rating" style = "vertical-align:top">
<xsl:choose>
<xsl:when test = "@Rating >= 5">
<img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/5stars.png"></img>
</xsl:when>
<xsl:when test = "@Rating >= 4">
<img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/4stars.png"></img>
</xsl:when>
<xsl:when test = "@Rating >= 3">
<img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/3stars.png"></img>
</xsl:when>
<xsl:when test = "@Rating >= 2">
<img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/2stars.png"></img>
</xsl:when>
<xsl:when test = "@Rating >= 1">
<img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/1stars.png"></img>
</xsl:when>
<xsl:when test = "@Rating >= 0">
<img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/0stars.png"></img>
</xsl:when>
<xsl:otherwise>
<img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/0stars.png"></img>
</xsl:otherwise>
</xsl:choose>
</span>
</div>
Next Steps
See Also
Concepts
Managing Rich Media Assets in SharePoint Server 2010 (ECM)
Walkthroughs for SharePoint Server 2010 (ECM): Creating and Customizing a Video Sharing Site
How to: Customize Styles in SharePoint Server 2010 (ECM)
Rich Media Programming Model in SharePoint Server 2010 (ECM)