Design and CSS styles
Version 3.x > Design and CSS styles > Creating a video gallery View modes: 
User avatar
Member
Member
andrejg - 1/9/2009 12:08:53 PM
   
Creating a video gallery
I've set out to create a video gallery for our intranet site.
The way I plan to do it is to use the standard Image Gallery web part to display the thumbnails of the videos (manually created .jpg files) - when a user clicks on the thumbnail it displays the video player (JW FLV Media Player) where the user can play the .flv file.

What I've done:
- created a (sub)page with the Image Gallery web part
- created a new transformation which includes the code that launches the .flv player
- each video would reside (alongside its thumbnail) in a subdirectory of the gallery, something like this:

gallery
.... -video01
........ -video.flv
........ -video01_thumbnail.jpg
.... -video02
........ -video.flv
........ -video02_thumbnail.jpg


What I have problems with:
- the gallery indexes all files - I'd like to set it up so that it displays only .jpg files and not the .flv files
- I'd like to pass the path of the .flv file to the video player - in the current state (see the transformation code included at the end of the post) the video player looks for the video.flv file in /its own/ directory (/flvplayer/video.flv). I'd like to pass the /gallery/video01/ path to the video player. Is it even possible? Would I have to write a custom function for my transformation?

Does anyone have any insights? Or perhaps an easier way to do it?

----
transformation code:

<p id='preview'>The player will show in this paragraph</p>

<script type='text/javascript' src='/flvplayer/swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('/flvplayer/player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=video.flv');
s1.write('preview');
</script>

User avatar
Kentico Support
Kentico Support
kentico_zdenekc - 1/13/2009 11:02:06 AM
   
RE:Creating a video gallery
Hi Andrej,

Your structure is fine and should allow to achieve what you need.

To restrict the files displayed by ImageGallery to .jpegs only, please use WHERE condition, such as "FileName LIKE N'%.jpg'"
But please check if your images - documents of CMS.File type, have the extension in the FileName field, because it doesn't necessarilly need to be specified in this field (it could be only in CMS.Attachment table - AttachmentExtension field)

the file flashvar path could be obtained using the NodeAliasPath field. You could use some (slightly ugly) construction like:

<%# Eval("NodeAliasPath").ToString().Substring(0, Eval("NodeAliasPath").ToString().LastIndexOf("/"))+"/video.flv" %>

in your transformation.
However, I'm not sure if the JW FLV player will handle the relative paths correctly, if not you'll need to add some prefix path, or use GetFileUrl function (see transformations documentation and context help).

Best regards,
Zdenek Cetkovsky, Kentico

User avatar
Member
Member
andrejg - 1/15/2009 3:48:27 AM
   
RE:Creating a video gallery
Hi Zdenek,

thanks for your reply - I've managed to get it working.
There's a snag, however: the JW FLV player will play only .flv files - if I pass to it the url of the .flv file with the GetFileUrl function it won't play it, since it is actually an aspx page. I've worked around it, for now, by creating corresponding subdirectories on the web server and placing the .flv files there. I'll have a look through the knowledge base if there's a way to directly access the files uploaded into the cms.