Sitefinity: Linking Viddler Videos and News Articles

One of the recent features added to Sitefinity that I've recently begun making use of is the Viddler video integration. However, the module itself stands alone, and I was in need of a way to link the individual videos to specific news stories, and vice-versa.

Fortunately, after spending some time with my favorite tool Reflector and a whole lot of debugging, this was accomplished with a minimal amount of trouble. Here's how it's done!

Add Metafield

First, you need to add a new Metafield to the News Module which will store the Guid for the video. Add the following line to web.config under the element:

<add key="News.Video" valueType="ShortText" visible="True" searchable="False" sortable="False" defaultValue="" />

Edit Admin News Templates

Make sure that you've mapped your external sitefinity templates, and add the following to your NewsAdd and NewsEdit Admin templates so that you can link the video to a news item via the editor:

<li class="selector">    
    <label>Video</label>    
    <asp:TextBox ID="Video" runat="server" />    
    <p class="example">Enter a related Video Guid from the Video on Demand Library.</p>
</li>

Edit Public News Template

Now open up your Public NewsItem templates. We need a placeholder to show a link to the file. I accomplished this by using a Panel, and setting its visibility to false, since by default, if there is no related video, I don't want this section to show.

<asp:Panel ID="VideoPanel" runat="server" Visible="false">    
    <h2>Related Video</h2>    
    <asp:HyperLink ID="lnkVideo" runat="server">        
        <asp:Image ID="VidThumb" runat="server" /> View Related Video
</asp:HyperLink></asp:Panel>

Inside the panel are placeholders for the video thumbnail and link. These will be populated on load time, so let's take a look at the code which handles this

object parent = Parent.Parent;
if (parent == null) return;

// must be inside a newsview!
if (!(parent is NewsView)) return;

// retrieve the current news item
var view = parent as NewsView;
var mgr = new NewsManager("News");
var news = mgr.Content.GetContent(view.SelectedItemId);
if (news == null) return;

// has video? 
var video = news.GetMetaData("Video");
if (video == null || string.IsNullOrEmpty(video.ToString())) return;

var libmgr = new LibraryManager("Video");
var content = libmgr.GetContent(new Guid(video.ToString()));
var vid = XmlToObject<VideoElement>.Deserialize((string)content.Content);
lnkVideo.NavigateUrl = "/video" + content.Url.Substring(1) + ".aspx";
VidThumb.ImageUrl = vid.ThumbUrl;
VidThumb.Width = 300;

VideoPanel.Visible = true;

As you can see, we traverse up the parent control, which in this case is a NewsView. This control has a SelectedItemId which refers to the selected news item. By retrieving the details of this item, we are able to retrieve its full details, including the Video Metafield.

If this field is not empty, then we use the LibraryManager to retrieve its details into a VideoElement object, which is represented by the variable vid. This element has several properties that provide access to the video link, thumbnail, and even embed code.

Using the VideoElement retrieved from the LibraryManager, we can populate our link and thumbnail image. You could easily use this to place the video right on the page, but I prefer to link to the Viddler video page so that I can use the template, comments, and social bookmark links.

See live example on McAllen.net

Edit Public Video Template

Now we need a way to link back to the news story from the video page. This is done in a similar fashion to the video. First we need to edit the Public VideoItem template. Add the following to your template:

<p><asp:HyperLink ID="lnkNews" runat="server" /></p>

Now take a look at the code to populate this link. Basically it's the same thing we did above, but in reverse. First we retrieve the video ID from the parent control, and use that to search the NewsManager for an element which has that id in the Video metafield.

var parent = Parent.Parent as ViddlerVideo;
if (parent == null) return;

var id = parent.SelectedItemId;
var filters = new IMetaSearchInfo[1];
filters[0] = new MetaSearchInfo(MetaValueTypes.ShortText, "Video", id.ToString(), SearchCondition.Equal);

var mgr = new NewsManager("News");
var results = mgr.Content.GetContent(filters);
if (results.Count == 0) return;

var newsItem = results[0] as IContent;
lnkNews.NavigateUrl = string.Format("/news/default{0}.aspx", newsItem.Url);
var title = newsItem.GetMetaData("Title").ToString();
lnkNews.Text = "View Related Story: " + title;
lnkNews.ToolTip = title;

If an item is found, the link is populated and becomes visible. That's all there is to it!

See live example on McAllen.net

Retrieve Video ID

Finally, we need a way to retrieve the video ID so that we can associate it with a news article. Go to the Images and Documents Module. At this point, you need to have setup your Sitefinity and Viddler integration, and synchronized your Viddler videos into Sitefinity.

Now, select the video you wish to link, and open it in preview mode. The video ID is actually a parameter at the end of the query string. All you have to do is copy that to the clipboard, then paste it into the NewsEdit page.

That's all there is to it! You can now link your news articles directly to related Viddler videos, and vice-versa. I hope that this article was helpful. As always your comments, and suggestions for improvement are greatly appreciated!