Tools you’ll need. - I plan on doing a screencast of this sometime.
Ditto, MODx 0.9.5, ( a fresh install works fine) Flash mp3/video/imagerotator all available here
http://www.jeroenwijering.com/?item=Flash_Video_Player
we’ll use ditto for the rss feeds. and maybe other things,
Our goals: Add a player to each page lets say you have an article with each podcast or audio. (optional of course). to build an iTunes RSS/podcast from a folder of documents, with attached audio.
1. First make a TV (template variable) to hold our url to the mp3 file. Note: iTunes chokes on filenames with spaces, the flash mp3 player is fine, FYI. Name the TV "Audio" , and give it some sort of caption or description to your liking. Set input type to "File".
So now we can attach a raw url to any page / set the templates to be accessed in the "template access" section. I used both my main template and my front page one.
2 next we make a snippet to call the TV conditionally, in the page, no need to call it if there is no audio attached right?
<?php
$output='';
$tvValue=$modx->getTemplateVarOutput('tvAudio',$modx->documentIdentifier);
if($tvValue['Audio']!='') $output.='<p id="player2"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p><p><a href="'.$tvValue['Audio'].'">Download File NOW!</a></p><script type="text/javascript">
var FU = { movie:"/assets/flash/mp3player.swf",width:"250",height:"20",majorversion:"7",build:"0",wmode:"transparent",
flashvars:"file='.$tvValue['Audio'].'&repeat=False&showdigits=false&displayheight=0&lightcolor=0xb22450&backcolor=0x990000&frontcolor=0xFFFFFF&autoscroll=true" };
UFO.create( FU, "player2");
</script>';
return $output;
?>
ok , maybe that’s confusing. Let’s go through it.
This code checks for our TV called "Audio" if it exists, it prints the flash mp3 player to the page. In here is were you also can customize the flash player, lok into it’s documentation or ask here.
Lets name this Snippet "AudioPlayer".
remember this line
movie:"/assets/flash/mp3player.swf",
We need to upload that file as well. It’s in the zip file for the mp3 player from our wonderful friend over at
http://www.jeroenwijering.com.
3. One last thing to do and you’ll have audio attached to a page. open your main template in the manager and add this to it [[AudioPlayer]] .. this will call the snippet, that calls the TV if present. and inserts a nice little player.
4. Ok lets PODCAST!
Make a Chunk and call it "podcast"
put this code in it.
<item>
<title>[+title+]</title>
<link>[~[+id+]~] </link>
<itunes:album></itunes:album>
<description></description>
<pubDate>[+date+]</pubDate>
<enclosure url="[+tvAudio+]" type="audio/mpeg"/>
<itunes:author></itunes:author>
<itunes:subtitle></itunes:subtitle>
<itunes:keywords></itunes:keywords>
</item>
Sure maybe it could be trimmed. I’m no expert. in fact I figured this out only a few weeks ago.
This chunk is used as a template for ditto.
Save, pass go, collect $200!
5. Now the rss feed and Ditto call.
Create a new document, "uses template" should say "blank". page type should be xml in page settings.
Now paste this in there.
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:itunes="http://www.itunes.com/DTDs/Podcast-1.0.dtd" version="2.0">
<channel>
<title>[(site_name)]</title>
<link></link>
<category>Audio Blogs</category>
<language>en-us</language>
<copyright>© 2007 </copyright>
<generator>Wavestatic Studios</generator>
<ttl>60</ttl>
<itunes:author></itunes:author>
<itunes:subtitle></itunes:subtitle>
<itunes:category text="Audio Blogs">
<itunes:category text=""/>
</itunes:category>
<itunes:summary></itunes:summary>
<itunes:owner>
<itunes:name></itunes:name>
<itunes:email>[email protected]</itunes:email>
</itunes:owner>
<itunes:explicit>no</itunes:explicit>
<image>
<url></url>
<title></title>
<link></link>
</image>
<itunes:image href="" />
[[Ditto?&startID=`50`&summarize=`5`&total=`5`&tpl=`podcast`]]
</channel>
</rss>
Set the startID to the folder where you are going to put your podcasts.
Some tips: if you are getting xml parsing errors, change the page type to html and debug from there.
A working example is here
http://herplaceradio.org
and now
http://lifechurchmn.org/home
Using similar code and steps you can do the same with video or images. on the lifechurch page I do just that, I have a image banner that is controlled by MODx, so I can have publish and unpublish dates.. SCHWEET!
This was developed for
http://wavestatic.com - yes I will shamelessly plug my company
Please post any questions or problems here so others can learn.
MODX Staff
