//
you're reading...
Custom Project, FS4SP

Previewing Video and Foto in Fast Search results

Recently I had the need to build a custom FAST Search results page to allow users to preview videos and photo files stored in SharePoint and display them or inline with a silverlight player or with our custom application page.

I’ve done this following these steps:

-Create Managed Property mapped to a crawled property for the identification of video and photo,

-Create Managed Property mapped to a crawled property for the url of a video or a photo,

-Create Managed Property mapped to a crawled property for the url of the thumbnail of the items video and photo

-Edit XSL and Fetched Property of the search results web part

Lets’s get started……

Create Managed Property mapped to a crawled property for the identification of video and photo

I made this step with a custom stage in pipeline extensibility. I created a Crawled Property type text, that contains a simple string for the identification of the item. When the crawler pass by a video, my stage put in this custom property a value “video” and for a photo the value “photo”.After this I made a mapping with a new  managed property called “GALLERY”.

Create Managed Property mapped to a crawled property for the url of a video or a photo

Because i didn’t have the url for the video or the photo, stored in the publishing image library, i created another custom Crawled Property which has as value the url for our “media-items”.After this I made a mapping with a new  managed property called “URLVIDEOFOTO”

Create Managed Property mapped to a crawled property for the url of the thumbnail of the items video and photo

In our sharepoint project we have a custom Silverlight for the upload of photo and video, that take from the file video a frame for make a thumbnail and preview it, for photo file the silverlight act a resize and create a thumb. This processes stored the url in a folder inside the publishingimages library in a column. In the indexing process the values from this column are saved in a crawled property that i mapped to a new managed property called “THUMBVIDEOFOTO”

Ok.. now that we have our new managed properties, we have to perform a full crawl to make the changes effective.

Edit XSL and Fetched Property of the  search results web part

Go to the results page, and edit the fetched property of CoreResultsWebPart, that is an XML, that looks like this:

<Columns><Column Name=”WorkId”/><Column Name=”Rank”/><Column Name=”Title”/><Column Name=”Author”/><Column Name=”Size”/><Column Name=”Path”/><Column Name=”Description”/><Column Name=”Write”/><Column Name=”SiteName”/><Column Name=”CollapsingStatus”/><Column Name=”HitHighlightedSummary”/><Column Name=”HitHighlightedProperties”/><Column Name=”ContentClass”/><Column Name=”IsDocument”/><Column Name=”PictureThumbnailURL”/><Column Name=”PopularSocialTags”/><Column Name=”PictureWidth”/><Column Name=”PictureHeight”/><Column Name=”DatePictureTaken”/><Column Name=”ServerRedirectedURL”/></Columns>

This XML fragment tells the Search Core Results web part which managed properties we want to return for each search result. Add our new managed properties:

<Column Name=”GALLERY”/> <Column Name=”URLVIDEOFOTO”/> <Column Name=”THUMBVIDEOFOTO”/>

Now we are ready to modify the XSL for preview video or photo:

Display inline silverlight player for video

Find the <xsl:template match=”Result”> section. This section of XSL is called for every result in the list of results returned from SharePoint. Add this snippet:

<xsl:choose>

<xsl:when test=”GALLERY[. = ‘video’]”>

</xsl:when>
</xsl:choose>

once this is done you should have this result :

Display Video and Photo in “our custom way” with a sharepoint application page

Now, for our customers was important open a pop-up for showing video and photo, then the XSL changes are a bit different. We’ve got a JQuery that open our application page with the silverlight player with function .click on the thumbnail div:

JS PHOTO

$(‘.mediaGallery-preview’).live(‘click’, function () {
var filename = $(this).attr(‘filename’);
var site = $(‘.Immagini’).attr(‘data-weburlRel’);
var pageLayoutsUrl = “ApplicationPage.aspx”;
var queryString = “?webUrl=” + site + “&imageName=” + filename + “&tipoMedia=Immagini”;
pUrl = pageLayoutsUrl + queryString;
var titoloImg = $(this).attr(‘title’);

openModalDialog();});

JS VIDEO

$(‘.mediaGallery-videoPreview’).live(“click”, function () {

var filename = $(this).attr(‘filename’);
var site = $(‘.Video’).attr(‘data-weburlRel’);
var pageLayoutsUrl = “TelecomItalia.NoiPortal/Media/ApplicationPage.aspx”;
var queryString = “?webUrl=” + site + “&imageName=” + filename + “&tipoMedia=Video”;
var titoloImg = $(this).attr(‘title’);
pUrl = pageLayoutsUrl + queryString;

openModalDialog();

});

so we have to include this js in the xsl and replicate the html structure: To include the js just add this line in xsl: <script type=”text/javascript” src=”SomePath/SomeFileName.js”></script>

Let’s start to change the results section and replicate the html:

<xsl:choose>

<xsl:when test=”gallery[. = ‘video’]”>

<div class=”video-preview” style=”border-bottom:1px solid #E8E8E8;” >
<a href=”#” urlvideo=”{link}” class=”mediaGallery-videoPreview Video” title=”{title}” filename=”{namevideofoto}” data-weburlRel=”{urlvideofoto}”>
<img src=”{thumbvideofoto}” />
<span class=”video-preview-overlay”>
<img src=”/_layouts/images/TelecomItalia.NoiPortal/playVideoOverlay.png” />
</span>
</a>
<div class=”VideoTitle”>
<a href=”#” class=”mediaGallery-videoPreview” id=”{concat($currentId,’_Title’)}” title=”{title}” filename=”{namevideofoto}” data-weburlRel=”{urlvideofoto}”>
<xsl:choose>
<xsl:when test=”hithighlightedproperties/HHTitle[. != ”]”>
<xsl:call-template name=”HitHighlighting”>
<xsl:with-param name=”hh” select=”hithighlightedproperties/HHTitle” />
</xsl:call-template>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select=”title”/>
</xsl:otherwise>
</xsl:choose>
</a>
</div>

//DISPLAY INFORMATION SUCH DATE, AUTHOR,SIZE etc..
<div class=”videoTemplate”>
<xsl:call-template name=”DisplayAuthors”>
<xsl:with-param name=”author” select=”author” />
</xsl:call-template>
<xsl:call-template name=”DisplayTAGS”>
<xsl:with-param name=”str” select=”tags” />
</xsl:call-template>
<xsl:call-template name=”DisplayDate”>
<xsl:with-param name=”write” select=”write” />
</xsl:call-template>
<xsl:call-template name=”DisplaySize”>
<xsl:with-param name=”size” select=”size” />
</xsl:call-template>
</div>
</div>
</xsl:when>

<xsl:when test=”gallery[. = ‘photo’]”>

<div class=”mediaGallery-images” style=”border-bottom:1px solid #E8E8E8;”>
<a href=”#” class=”mediaGallery-preview Immagini” title=”{title}” filename=”{namevideofoto}” data-weburlRel=”{urlvideofoto}”>
<img src=”{thumbvideofoto}” />
</a>
<div class=”FotoTitle”>
<a href=”#” class=”mediaGallery-preview” id=”{concat($currentId,’_Title’)}” title=”{title}” filename=”{namevideofoto}” data-weburlRel=”{urlvideofoto}”>
<xsl:choose>
<xsl:when test=”hithighlightedproperties/HHTitle[. != ”]”>
<xsl:call-template name=”HitHighlighting”>
<xsl:with-param name=”hh” select=”hithighlightedproperties/HHTitle” />
</xsl:call-template>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select=”title”/>
</xsl:otherwise>
</xsl:choose>
</a>
</div>

//DISPLAY INFORMATION SUCH DATE, AUTHOR,SIZE etc..
<div class=”fotoTemplate”>
<xsl:call-template name=”DisplayAuthors”>
<xsl:with-param name=”author” select=”author” />
</xsl:call-template>
<xsl:call-template name=”DisplayTAGS”>
<xsl:with-param name=”str” select=”tags” />
</xsl:call-template>
<xsl:call-template name=”DisplayDate”>
<xsl:with-param name=”write” select=”write” />
</xsl:call-template>
<xsl:call-template name=”DisplaySize”>
<xsl:with-param name=”size” select=”size” />
</xsl:call-template>
</div>
</div>

</xsl:when>

</xsl:choose>

Once this is done you should have this result :

      

clickin on the preview image the js will open the appllication page with the silverlight player:

SO NICE 🙂

Annunci

Informazioni su matteolenzo

Fast Search for Sharepoint 2010 Junior developer/consultant

Discussione

Non c'è ancora nessun commento.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: