Welcome to tankete.com Sign in | Join | Help

José Lema

Inside the Community Server development team

Shared Posts


Badges



  • www.flickr.com
    This is a Flickr badge showing public photos from tankete. Make your own badge here.
CS Spotlight: Video Gallery

A couple of folks have begun to notice The Hive and have been asking how to build a hive-like video gallery on the Community Server forums. In this week's spotlight, I figured I'd answer some of those questions.

In case you weren't aware, CS comes with a video listing page as part of the forums. Just browse to /forums/videos.aspx and you'll see something that looks similar to the Active/Unanswered/Not Read pages. This page uses a ThreadView to display a text-based listing of threads containing videos. In order to get more of a GoogleVideo look, we've also included a ThreadDataList control. Similar to the ThreadRepeater, the ThreadDataList control exposes an item template for you to customize. Enough theory, let's get to some code.

Replace the <CSD:ThreadView /> control with the following:

<div id="VideoGallery" align="center">
   <CSD:ThreadDataList ThreadViewMode="Videos" runat="server" CellPadding="20" RepeatColumns="3" RepeatDirection="Horizontal">
    <ItemTemplate>
     <div id="VideoItem" style="text-align: center">
      <div id="Video">
       <a href="<%# Globals.GetSiteUrls().Post((int)DataBinder.Eval(Container.DataItem, "PostID")) %> "><img src="<%# DataBinder.Eval(Container.DataItem, "VideoImageUrl") %>" width="200" height="150" border="0" /></a>
      </div>
      <div id="Subject">
       <a href="<%# Globals.GetSiteUrls().Post((int)DataBinder.Eval(Container.DataItem, "PostID")) %> "><%# Formatter.CheckStringLength(DataBinder.Eval(Container.DataItem, "Subject").ToString(), 35) %></a>
      </div>
      <div id="Statistics">
       <%# string.Format(ResourceManager.GetString("PostDisplay_VideoPost_Statistics"), DataBinder.Eval(Container.DataItem, "Views"), DataBinder.Eval(Container.DataItem, "Replies")) %>
      </div>
      <div id="Details">
       <%# string.Format(ResourceManager.GetString("PostDisplay_VideoPost_Details"), DataBinder.Eval(Container.DataItem, "VideoFileFormat"), DataBinder.Eval(Container.DataItem, "VideoDuration")) %>
      </div>
     </div>
    </ItemTemplate>
   </CSD:ThreadDataList>
  </div>

Now let's walk thru what we've done.

<div id="VideoGallery" align="center">

First you'll notice we placed everything in a centered div. This will keep your gallery centered. (You can use CSS to your heart's content, but I'm gonna keep it simple)

<CSD:ThreadDataList ThreadViewMode="Videos" runat="server" CellPadding="20" RepeatColumns="3" RepeatDirection="Horizontal">

Since the ThreadDataList is a subclass of DataList, you have all the properties of a regular DataList available. I've chosen to have a three-column horizontal based flow layout (with some padding)

<div id="VideoItem" style="text-align: center">
      <div id="Video">
       <a href="<%# Globals.GetSiteUrls().Post((int)DataBinder.Eval(Container.DataItem, "PostID")) %> "><img src="<%# DataBinder.Eval(Container.DataItem, "VideoImageUrl") %>" width="200" height="150" border="0" /></a>
      </div>
      <div id="Subject">
       <a href="<%# Globals.GetSiteUrls().Post((int)DataBinder.Eval(Container.DataItem, "PostID")) %> "><%# Formatter.CheckStringLength(DataBinder.Eval(Container.DataItem, "Subject").ToString(), 35) %></a>
      </div>
      <div id="Statistics">
       <%# string.Format(ResourceManager.GetString("PostDisplay_VideoPost_Statistics"), DataBinder.Eval(Container.DataItem, "Views"), DataBinder.Eval(Container.DataItem, "Replies")) %>
      </div>
      <div id="Details">
       <%# string.Format(ResourceManager.GetString("PostDisplay_VideoPost_Details"), DataBinder.Eval(Container.DataItem, "VideoFileFormat"), DataBinder.Eval(Container.DataItem, "VideoDuration")) %>
      </div>
     </div>

This is where we've specified what each video "chunk" should look like. I've tried to keep it simple in order to see how you would best access the data that's available. If you're familiar with databinding syntax, you'll just need to understand the properties available on a video post. For this sample we'll access the PostID (used for url generation), the VideoImageUrl (used as the src for a preview image), the Subject (used as the title), Views & Replies (used for stats), and VideoFileFormat & VideoDuration (used for details). If you look closely you'll see that we're using Formatter.CheckStringLength to guarantee that long subjects don't make the UI look awful. We're also using String.Format to compose the statistics and details text. By changing the data, layout, css, or the resources, you have ultimate control for how you want your video gallery to look.

Extra Credit
If you want to bee more hive-like (sorry, couldn't resist), you can also create a new navigation tab, master page, and change the siteurl in order to make videos a first-class citizen. That exercise, however, is left to the reader... :)

Before and After
Here are some pictures of what the /forums/videos.aspx page looks like before and after this tweak.

Share this post: StumbleUpon | email it! | bookmark it! | digg it! | reddit!
Posted: Tuesday, May 30, 2006 11:50 PM by Jose
Filed under: ,

Comments

Community Server Daily News said:

Telligent's Jose Lema releases a new CS Spotlight on how to duplicate the Video Gallery seen at the popular

# May 31, 2006 2:24 PM

Fulso said:

Great post Jose, and just what we require for a client. The only problem I have is that I am not getting video posts to display using ThreadView, let alone ThreadDataList. Video posts are only displayed when a specific forum is selected when using the ThreadView control. No records are displayed for 'All Forums'.

As there are no drop down lists in the ThreadDataList it means that no video posts get displayed and there is no option to select a specific forum. I'm really not sure why. Any ideas?

# June 14, 2006 10:03 PM

Dalamar said:

How many video's will it show? It seems to stop at 10. I dont see where to change that, I assume it is being set in the Datasource?

# June 18, 2006 1:52 PM

Jose said:

There's a property on the ThreadDataList control, named ItemsToDisplayCount that you can use to set the number of items. As you mentioned, the default is 10.

# June 18, 2006 11:32 PM

J-O's blog said:

Har precis lagt till ett mediabibliotek p&amp;aring; sajten. Ni kan n&amp;aring; det via &amp;quot;Media&amp;quot;-knappen

# July 15, 2006 3:21 PM

J-O Eriksson said:

In June I talked about having a videogallery in Community Server. I referenced an article by Jos&amp;eacute;

# July 19, 2006 7:45 AM

J-O Eriksson's blog said:

In June I talked about having a videogallery in Community Server. I referenced an article by Jos&amp;eacute;

# July 19, 2006 7:51 AM

Community Server Daily News said:

This is a compilation of all Forum FAQ content on communityserver.org to serve as a timestamp of where

# July 24, 2006 5:43 PM

smartin591 said:

Hey! can someone tell me what I'm doing wrong newbie question. here is the code on my video.aspx page I think I did it right but it still shows up as looking like the stock page does. any ideas?? thanks, steve

<%@ Page SmartNavigation="False" Language="C#" EnableViewStateMac="false" %>

<%@ Register TagPrefix="CS" Namespace="CommunityServer.Controls" Assembly="CommunityServer.Controls" %>

<%@ Register TagPrefix="CSD" Namespace="CommunityServer.Discussions.Controls" Assembly="CommunityServer.Discussions" %>

<%@ Import Namespace="CommunityServer.Galleries.Components" %>

<%@ Import Namespace="CommunityServer.Blogs.Components" %>

<%@ Import Namespace="CommunityServer.Components" %>

<CS:MPContainer runat="server" id="MPContainer" ThemeMasterFile = "ForumMaster.ascx" >

<CS:MPContent id="bcr" runat="server">

<div id="VideoGallery" align="center">

  <CSD:ThreadDataList ThreadViewMode="Videos" runat="server" CellPadding="20" RepeatColumns="3" RepeatDirection="Horizontal">

   <ItemTemplate>

    <div id="VideoItem" style="text-align: center">

     <div id="Video">

      <a href="<%# Globals.GetSiteUrls().Post((int)DataBinder.Eval(Container.DataItem, "PostID")) %> "><img src="<%# DataBinder.Eval(Container.DataItem, "VideoImageUrl") %>" width="200" height="150" border="0" /></a>

     </div>

     <div id="Subject">

      <a href="<%# Globals.GetSiteUrls().Post((int)DataBinder.Eval(Container.DataItem, "PostID")) %> "><%# Formatter.CheckStringLength(DataBinder.Eval(Container.DataItem, "Subject").ToString(), 35) %></a>

     </div>

     <div id="Statistics">

      <%# string.Format(ResourceManager.GetString("PostDisplay_VideoPost_Statistics"), DataBinder.Eval(Container.DataItem, "Views"), DataBinder.Eval(Container.DataItem, "Replies")) %>

     </div>

     <div id="Details">

      <%# string.Format(ResourceManager.GetString("PostDisplay_VideoPost_Details"), DataBinder.Eval(Container.DataItem, "VideoFileFormat"), DataBinder.Eval(Container.DataItem, "VideoDuration")) %>

     </div>

    </div>

   </ItemTemplate>

  </CSD:ThreadDataList>

 </div>

</CS:MPContent>

</CS:MPContainer>

# September 29, 2006 6:26 PM

Steve said:

the code above is correct I thought it would change the whole forums listing but it just changes the video.aspx file I'm taking a smart pill right now!

# September 29, 2006 9:50 PM

Steve said:

Hey! can any one help on adding a forth line to the video.aspx file I want to add the ratings "the 5 stars" right below the videoduration I give up I don't know how to call it in??? thanks, Steve
# October 2, 2006 11:10 AM

Razzamataz said:

I created a videoforum in CS 2.1 per your instructions outlined in this article, and it totally rocks!

Now I'd like to link URL:

http://myserver.mydomain.com/forums/video.aspx

to my particular forum at URL:

http://myserver.mydomain.com/forums/16/ShowForum.aspx

Could you tell me how I do that?

Thanks for the awesome video-code,

Razza

# October 19, 2006 2:19 PM

Daily News Faq List said:

Telligent's Jose Lema releases a new CS Spotlight on how to duplicate the Video Gallery seen at the popular

# November 22, 2006 12:00 PM

FAQs - Communityserver.Org said:

FAQ posts contain multiple subject items appropriate to this forum, and will evolve over time with new

# January 9, 2007 11:41 PM

Gary Stadter said:

Is there a way to adapt this to only bring back posts w/video from a specific forum?

Would there be some other way than that to have categorys of videos, rather than one page with all videos from all forums on same page?

Thank you for and ideas or siggestions,

Gary Stadter

# January 26, 2007 10:36 AM

Jose said:

Gary: The ThreadDataList supports a ForumID property, so yes, you could add ForumID="##" to the server control and hardcode a forum id. Alternatively, you could give the ThreadDataList an ID and then add inline code that sets the ForumID property automagically.

I was thinking of something like this (assuming you've given the control an ID="VideoList"):

<script language="cs" runat="server">

void Page_Load()

{

   if (Request.QueryString["ForumID"] != null)

       VideoList.ForumID = Convert.ToInt32(Request.QueryString["ForumID"]);

}

</script>

When browsing to Videos.aspx you'd see all video posts and when you hit Videos.aspx?ForumID=5 you'd only see the video posts within forum #5.

Make sense?

# January 26, 2007 6:59 PM

Gary Stadter said:

three words....

U da man !

# January 29, 2007 9:14 AM

salsero96 said:

Does this work with files that are embedded in forum? (for example YouTube) Or does it only work with files that are uploaded to server.

If it works with YouTube, can you please explain how?

Thank you

# February 9, 2007 9:43 PM

Jose said:

Hi salsero96,

Thanks for the question.

Actually, the videos that are in the forums are just linked to the actual remote videos. There is no capability in Community Server 2.1 to support uploading video files and embedded them.

In a future release, you can expect us to better support uploading of videos in addition to supporting Google and YouTube videos out of the box. For now, we support WMP, Real, Shockwave and Quicktime.

# February 13, 2007 6:14 PM

Community Server Bits said:

Telligent's Jose Lema releases a new CS Spotlight on how to duplicate the Video Gallery seen at the popular

# March 12, 2007 12:16 PM

video said:

Does it works with cs2007.  How do i replace these code into videos cs2007

# April 17, 2007 12:06 PM

Jose said:

video - To be honest, I haven't verified it yet. If I get time later tonight I'll try to check and make an update to the post as necessary.

Thanks for the inquiry...

# April 24, 2007 11:23 AM

video said:

Thank you Jose,

Please let me know when you are going to release an update to video.  

Thanks again

# April 28, 2007 8:39 AM
New Comments to this post are disabled