Hey Paal_Joachim,
Thanks for the interest in My work. My first and best suggestion would be the CSS file. I have a readable version available at
http://egliseparoledegrace.org/includes/themes/default/css/base.css
The base CSS file imports all necessary style sheets. Just look at reset.css, layout.css, extra.css and nav.css to see the styling of the site.
One technique I can share with you right now is the video listing. I’ll share the other ones as time becomes available.
You will need 2 snippets to get this done:
- JWplayer by George D. Carstensen. I’m using a modified version of the snippet so it could work with Revo, with a custom (licensed) skin. The default player will also work.
- getResources
I used a very basic tree structure with the following resources:
+ videos.html (as the parent)
- video1
- video2
- video3
- etc.
I used two templates: the first for the parent page and the second for the child pages
1 - The video listing page (parent)
On my videos.html (the parent: id=41) I placed the following snippet call in the content section:
[[!getResourcesTag? &elementClass=`modSnippet` &element=`getResources` &tpl=`VideoClip` &parents=`41` &limit=`9` &includeContent=`1` &includeTVs=`1` &showHidden=`0` &hideContainers=`1` &cache=`0` &pageVarKey=`page` ]]
As you can see, the snippet is listing all resources contained in the parent folder (41 or videos.html).
Notice that
&includeTVs is set to 1. This is important because I wanted to retrieve some varying content like thumbnails and video duration for each video clip on the parent page.
Now that the call was placed, I wanted a thumbnail view for listed resources so I created a template (chunk) that I named VideoClip and used the following XHTML code:
<div class="clip">
<div class="pubdetails">
<p class="date">[[+createdon]]</p>
<p class="dur">[[+tv.ClipDuration]]</p>
</div>
<div class="clear"></div>
<a href="[[~[[+id]]]]">
<img src="[[+tv.ClipThumb]]" alt="[[+pagetitle]]" width="220" height="124" />
<span class="id">[[+tv.ClipCategory]]</span>
<span class="title">[[+pagetitle]]</span>
<span class="desc">[[+introtext]]</span>
</a>
</div>
<!---/ End clip-->
This should be very straightforward. [[+tv.ClipThumb]] simply refers to the ClipThumb TV that each video child page is supposed to have and I used the image widget for better control of the input.
Of course the styling of the VideoClip template was achieved with CSS. Take a Look at the extra.css to see how I did it.
I also used a pagination snippet to only display 9 videos per page and here’s the XHTML:
<div id="pagination-media" class="videos">
<ul>
[[!+page.nav]]
</ul>
</div>
See the extra.css file for the pagination styles.
2 - The video viewing (child) page (Uses a different template than the parent)
The main feature I will focus on is the player. Everything else is basic HTML and should be easy to figure out.
First,
- Download the .zip at
http://www.jeroenwijering.com/?item=JW_FLV_Player
- Unzip the file and rename it ’embed’
- Place /embed/ inside another directory entitled ’JWPlayer’
- Upload the JWPlayer directory to your assets/components/ directory
Then create a snippet and name it
JWplayer (This version has been modified so it could work with MODx Revolution). You can give it whatever description you like or simply follow the instructions contained in the snippet.
In it, paste the following code (contains detailed install instructions):
<?php
// SNIPPET NAME: JWPlayer
// SNIPPET DESCRIPTION: A Snippet to place the JW FLV Player into a MODx Page
// VERSION 1.1 - UPGRADED FOR MODX 2 PL on 8/7/2010
/*---------------------------------
================
:: CREDIT
================
This Snippet writes the code necessary to properly display the JW FLV player in MODx
THE JW FLV player is developed by Jeroen Wijering and is available at http://www.jeroenwijering.com/
Respect the developer's license: http://creativecommons.org/licenses/by-nc-sa/3.0/
MODx Snippet thingie by George D. Carstensen
www.anablepo.com
=======
1.0.1 Changelog
Multiple player per page better supported - thanks keshon
================
:: INSTALL
================
- Download the .zip at http://www.jeroenwijering.com/?item=JW_FLV_Player
- Unzip the file and rename it 'embed'
- Place /embed/ inside another directory entitled 'JWPlayer'
- Upload the JWPlayer directory to your assets/components/ directory
- Paste the text of this document in a snippet - entitled 'JWPlayer'
- Reccommended: Create a Templave Variable (TV) Called 'videosrc' and
Set the input type as 'file'
* I'm not packaging these files in the snippet download - because the player is
sometimes updated - and you probably want the newest one.
* Tested and written for JW FLV MEDIA PLAYER v. 4.0
================
:: USAGE
================
- Simple! Place the snippet call [[JWPlayer? &src=[*videosrc*]]] in your document.
- If you chose to create the TV above, use the call [[JWPlayer? &src=[*videosrc*]]]
and set the filename using the TV dialog in your document.
- If you choose to use paramaters, simply append them like so:
[[JWPlayer? &src=[*videosrc*]¶meter1=value1¶meter2=value2&]]
(kind-of like a URL line, but make sure there's a space between the ? and the &.)
- If you use the player more than once in a page with different sources, scrap the TV and do this:
[[JWPlayer? &src=path/to/file]]
================
:: AVAILABLE PARAMETERS
================
*- All of these parameters defaults are editable below
&width - width in px
&height - height in px
&logo - location of logo from MODx install root. (ex: assets/images/monkeys/logo.png )
&fullscreen - enables fullscreen function ( true | false )
&stretching - specifies stretch type (uniform | fill | exactfit | none )
-'uniform' plays the video and fills up the frame - using black bars to perserve aspect
-'fill' fills up the frame while maintaining aspect ratio - may result in clipping.
-'exactfit' stretches the movie to fit the frame - aspect ratio is out the window
-'none' doesn't stretch at all - just plays the video in it's original dimensions.
Clipping possible.
&controlbar - displays controlbar either as a floaty transparent thing, or the traditional
bottom ( float | over | none )
================
:: FORMATS
================
Baseline h.264. The player isn't too picky about the file extension - I use .mp4, but I tested it with .flv and .m4v.
To be kind, stick to about 600/700 mb/sec or less.
---------------------------------*/
//EDITABLE PARAMETER DEFAULTS - only edit the stuff in Quotes - " ~ "
$width = (isset($width)) ? strtolower($width) : "550" ; //default video width in px
$height = (isset($height)) ? strtolower($height) : "434" ; //default video height in px
$logo = (isset($logo)) ? strtolower($logo) : "assets/media/images/player/vidlogo.png" ; //location of logo for overlay
$fullscreen = (isset($fullscreen)) ? strtolower($fullscreen) : "true" ; //Enable fullscreen function
$stretching = (isset($stretching)) ? strtolower($stretching) : "fill" ; //Stretching options available: uniform | fill | exactfit | none
$controlbar = (isset($controlbar)) ? strtolower($controlbar) : "over" ; //Controlbar location options available: bottom | over | none
$image = (isset($image)) ? strtolower($image) : "assets/media/images/player/preview.jpg" ; //default preview image
$title = (isset($title)) ? strtolower($title) : "" ; //default Video Title
$author = (isset($author)) ? strtolower($author) : "" ; //default Video Author
$description = (isset($description)) ? strtolower($description) : "" ; //default Video Description
$dateadded= (isset($dateadded)) ? strtolower($dateadded) : "" ; //Date video was added
//FINISH EDITABLE CONTENT - if you don't know what you're doing - Keep Out!
$jw_base = $modx->getOption('site_url') . "assets/components/JWPlayer/";
$Site_base = $modx->getOption('site_url');
$file = $modx->getOption('site_url') . $src;
$logosrc = $modx->getOption('site_url').$logo;
$output = "<script type=\"text/javascript\" src=\"" . $jw_base."embed/swfobject.js\"></script> \n";
$output .= "<div id=\"$file\"></div>\n<script type=\"text/javascript\"> \n";
$output .= "var so = new SWFObject('" . $jw_base . "embed/player-licensed-viral.swf','mpl','$width','$height','9'); \n";
$output .= "so.addParam('allowscriptaccess','always'); \n";
$output .= "so.addParam('allowfullscreen','true'); \n";
$output .= "so.addParam('wmode','transparent'); \n";
$output .= "so.addParam('flashvars','&dock=false&file=$file&logo=$logosrc&skin=$jw_base/embed/skins/modieus/modieus.swf&controlbar=$controlbar&fullscreen=$fullscreen&stretching=$stretching&image=$image&title=$title&author=$author&description=$description'); \n";
$output .= "so.write(\"$file\"); \n";
$output .= "</script>";
return $output;
Now that your snippet is created, simply call it on your child pages like this:
[[JWPlayer? &src=[[*VideoSrc]]]]
This assumes that your template uses a TV called
VideoSrc that is formatted as a file. This is used to add the video to the page.
I also used a thumbnail for each video. I used a TV that I named ClipThumb and set its widget to image. This is used by the parent page as seen above.
I hope this will put you in the right direction. Let me know if you have any questions.
I strongly recommend that you read the excellent getResources tutorial available in the Wiki at
http://rtfm.modx.com/display/ADDON/getResources for a more detailed overview of the snippet.
See the snippet to learn more on the usage and available parameters.
Credit where credit is due: the JWplayer snippet was written by George D. Carstensen is based on the excellent player by Jeroen Wijering and is available at
http://www.jeroenwijering.com/. See the snippet for licensing notes.
Treigh
