29 - Getting the Audio Messages on the Website
I’ve been talking about Podcasts all along, but there are actually three ways I want to let people consume the mythical recordings of our pretend church pastors - with a “play” button right on the the website, a link to download the .MP3 file, and a true Podcast that wraps the .MP3 files in an RSS feed. In this chapter I’ll cover the first one.
I’m lazy - whenever I need to implement a new website section, I look for shortcuts. Have I already done some work I can leverage for the new section? Copying existing templates is way faster than starting over again. In this case, I looked through the site as it sits, and it occurred to me that the weblog section was a great starting point. It’s setup with categories, archives, and comments—all great stuff for the audio/podcast section. Categories in this case will contain message series, and archives will be handy as people often will want to find messages by date.
So - that sets the build approach for this section:
- Create a new template group by duplicating the weblog templates
- Update weblogs & paths etc in new templates
- Reformat content area
- Repurpose existing embedded templates
- Update other templates using those embeds
Create a New Template Group
I named my template group “audio-messages” and copied the weblog’s templates while doing so. The new template group will sort by default to the bottom of the Template Groups. To change this, Choose Edit Group Order, then Alphabetize to get it sorted to the top where it should be.
Update Template Code
The next step is to run through both audio-messages/index and audio-messages/comments and change:
- All weblog references to “audio-messages”
- The html body id to “audio” (so the banner image changes out)
- The my_location variable to an empty string to prevent the main navigation active state from showing
- The path variables to point at audio-messages/index rather than weblog/index
Reformat Content Area
I do have different fields in the audio-messages section than in the weblog. I also want to fit in a Wimpy Player Button. Below is the code that I’m using in the post div on both audio-messages/index and audio-messages/comments (I’ll also include an updated stylesheet in the companion files).
<div class="post">
<h3>{entry_date format='%F %d, %Y'}</h3>
<em>{message_summary}</em>
<div class="wimpy_player_right">
<p>Wimpy Player <br />Placeholder</p>
</div>
<div class="sermon_details_left">
<p>Title: <strong>{title}</strong></p>
<p>Series: <strong>{categories}{category_name}{/categories}</strong></p>
{if worship_service !="0"}
<p>Service: <strong>{related_entries id="worship_service"}{title}{/related_entries}</strong></p>
{/if}
{if number_in_series}
<p># in Series: <strong>{number_in_series}</strong></p>
{/if}
{if scripture_verses}
<p>Verses: <strong>{scripture_verses}</strong></p>
{/if}
<p>Download Audio: <strong><a href="{site_url}audio_files/{audio_file}">{audio_file}</a></strong></p>
</div>
<div style="clear: both;"></div>
<div class="post_meta">
<p>By {url_or_email_as_author}
{if allow_comments}({comment_total}) <a href="{url_title_path=audio-messages/comments}#comments">Comments</a>{/if}</p>
</div>
</div>
The only real thing of note here is the use of conditionals to only show field titles if there is content in them. Note that:
{if scripture_verses}
is the same as saying:
{if scripture_verses != ""}
This is taking advantage of the shorthand syntax for conditionals.
Also checking for an empty relationship field is slightly different:
{if worship_service !="0"}
For the link to the audio file, I’m assuming the file has been updated via FTP, and just the file name posted into EE. Then the template is creating the link back to the file:
<a href="{site_url}audio_files/{audio_file}">
Repurpose Embedded Templates
If you recall, the left navigation in the weblog is handled by two embedded templates - embeds/weblog_category_nav and embeds/weblog_archive_nav. Functionally these two templates do exactly what I want them to in this section, they just don’t pull from the right weblog or link to the right spot. Since I’ve matched the weblog name and template group name, I can make these two existing embedded templates work for both the weblog and audio section by passing in that value as an embedded variable. I’ll include both the updated templates in the companion files, so will cover the changes to just one of them here.
Here is the template as we finished it for the weblog:
<div class="navcontainer">
<h3>Archives</h3>
<ul class="navlist">
{!--This tag will build the left-column archive subnavigation --}
{exp:weblog:month_links weblog="weblog" limit="50"}
<li>
<a
{!--This conditional will cause the link to the currently-viewed archive choice to be highlighted --}
{if segment_2==year AND segment_3==month_num}
class="active"
{/if}
href="{path=weblog/index}"> {month}, {year}
</a>
</li>
{/exp:weblog:month_links}
{!--This conditional will create a show all posts link only if an archive link was selected --}
{if segment_2 !="category" AND segment_3!=""}
<li><a href="/index.php/weblog/">Show All Posts</a></li>
{/if}
</ul>
</div>
And here’s what it needs to be:
<div class="navcontainer">
<h3>Archives</h3>
<ul class="navlist">
{!--This tag will build the left-column archive subnavigation --}
{exp:weblog:month_links weblog="{embed:my-section}" limit="50"}
<li>
<a
{!--This conditional will cause the link to the currently-viewed archive choice to be highlighted --}
{if segment_2==year AND segment_3==month_num}
class="active"
{/if}
href="{path={embed:my-section}/index}"> {month}, {year}
</a>
</li>
{/exp:weblog:month_links}
{!--This conditional will create a show all posts link only if an archive link was selected --}
{if segment_2 !="category" AND segment_3!=""}
<li><a href="{path='{embed:my-section}/index'}">Show All Posts</a></li>
{/if}
</ul>
</div>
You can see all weblog and path references now use the passed-in variable of my-section rather than being hardcoded. The only real clever thing going on here is the matching of weblog names and template group names - it allows me to pass in only one value that works for both purposes. However now that I’ve made these templates more reusable I don’t like their names as they sound weblog-specific. I’m going to rename them to:
- embeds/sidebar_archive_nav
- embeds/sidebar_category_nav
You can rename templates by clicking on the Preferences link in the center column when a template group is active. Once in the Preferences area, enter the new name for the template and click update.
Updating the Embed Statements
With the embeds updated and renamed I now have to update the embed statements that call them. I’ll start with weblog/index and weblog/comments. These were previously:
{embed="embeds/weblog_category_nav"}
{embed="embeds/weblog_archive_nav"}
And they need to be:
{embed="embeds/sidebar_category_nav" my-section="weblog"}
{embed="embeds/sidebar_archive_nav" my-section="weblog"}
In audio-messages/index and audio-messages/comments this code needs to be:
{embed="embeds/sidebar_category_nav" my-section="audio-messages"}
{embed="embeds/sidebar_archive_nav" my-section="audio-messages"}
With these templates updated I now have a working web-presentation of audio-messages with category and archive views and the ability to comment on a message.
Update Utility Navigation
With the new section now implemented I need to provide navigation to it. Update embeds/page header to link to the new section:
<a href="{path='audio-messages'}">Audio Messages</a>
Template Checklist
I’ve done a fair amount of template work in this chapter. Let me recap:
New Template Group:
- audio-messages
New Templates:
- audio-messages/index
- audio-messages/comments
Renamed/Updated Templates:
- embeds/weblog_category_nav to embeds/sidebar_category_nav
- embeds/weblog_archive_nav to embeds/sidebar_category_nav
Updated Templates:
- weblog/index
- weblog/comments
- stylesheets/style
- embeds/page_header
For my next trick, I’ll get the Wimpy player button installed and working so that site visitors can click a simple play button to hear the message right on the website.
Category Navigation
Previous Comments
by Mike Boyink (Author)
Date: Monday, November 24th, 2008
Comment: #2
Thanks for the comment Kevin. My plan is to implement the simple Wimpy player button as a way to play a given message from the website.
No matter how fancy the onsite player I still see value in the subscription element of podcasting. I’m not a podcast user myself, but the idea of people subscribing to get the next sermon file automatically is still worth it.
by .(JavaScript must be enabled to view this email address)
Date: Tuesday, November 25th, 2008
Comment: #3
Mike,
One of the things I have discovered in implementing RSS of our Prayer List at our church, is that I grossly overestimated the technical literacy of the parish. On a Mac, RSS is fundamental and easy. But we went for three months before I finally realized that the vast majority of our Windows users had no idea of RSS nor understood how to implement it. And then I sat with a few of them to see what was involved in what for me was a trivial task. I was astonished to see how complex it was for them. Most don’t use Outlook or a client that is also a reader. So I learned I had to bypass all that. We implemented Feedburner and put the email subscription form on the site. We discovered that abstracting them from the complexity of RSS/Podcasting, etc. was essential because this demographic is just now learning to master email. So, I hope that your plan will comport with Feedburner or a similar methodology, that allows easy subscription to the audio-messages, with delivery “pushed” via email.
Finally, let me echo the thanks for this series. Well done, indeed.
by Mike Boyink (Author)
Date: Tuesday, November 25th, 2008
Comment: #4
Hey Craig:
Thanks for the comment.
I’m really fighting to keep this series as simple and as focused on EE as possible (Keeping my purpose in mind here, which is to teach about using EE for a church site rather than how to build the best possible church site using any available technologies).
So - no integration with Feedburner or other email alerts for sermon messages are planned.
by .(JavaScript must be enabled to view this email address)
Date: Tuesday, November 25th, 2008
Comment: #5
Mike,
I wasn’t asking you to cover those things. Sorry if I gave that impression. No, I can imagine how that would be a major tangent. My question, was about there being anything that would fail to comport with that methodology. In other words, is there anything you see in where you are heading that would be a dead-end for someone who wants to push podcasts via feedburner. If the result will be a generic podcast, then we should be fine.
by Mike Boyink (Author)
Date: Tuesday, November 25th, 2008
Comment: #6
Ah - no worries.
I’ve never worked with Feedburner, but it seems like a Podcast feed is a podcast feed no matter what generates it, so I can’t imagine it being that difficult to do.
by Gaurav
Date: Friday, December 26th, 2008
Comment: #7
Hi,
I don’t know why but my variable {scripture_verses} does not output its contents on the same line. The contents are displayed on the second line. I have checked my variable and also the code in the templates.
But when I did view->source in my browser I can see some tags around my outputted content. I don’t know where they are coming from.
You can see the output here:
http://giantworldtelecom.com/ee/index.php/audio-messages/
by Mike Boyink (Author)
Date: Friday, December 26th, 2008
Comment: #8
This was my bad - I had you both set the field formatting on the scripture verses field to XHTML, and coded paragraph tags in the template - this will have the result of rendering with double paragraph tags.
You can either set the field formatting to none or remove the p tags from the code. I choose the former and edited the previous post.
by .(JavaScript must be enabled to view this email address)
Date: Friday, December 26th, 2008
Comment: #9
I am so glad this question was asked, because I have the same issue in a few places. Are you saying that if the field is set to XHTML, EE will automatically insert a paragraph tag after each field? So if I have three fields I want to print side by side occurring all within one entries tag, they will end up with line breaks after each field? Because that is what I have been observing/troubleshooting.
For example:
{title} {channel_item} {description} would appear vertically rather than all in one continues text.
by Mike Boyink (Author)
Date: Friday, December 26th, 2008
Comment: #10
Yes - if you review the EE Docs on Text Formatting you’ll see that if the field is set to XHTML, EE will mark it up according to how it’s been entered in the field - adding paragraph and break tags.
by .(JavaScript must be enabled to view this email address)
Date: Friday, December 26th, 2008
Comment: #11
Thanks, Mike. I had a conceptual error here that this “mea culpa” by you exposed and fixed, so your error was my good fortune.
by Trevor Davis
Date: Monday, January 19th, 2009
Comment: #12
Mike-
This is great stuff, I am learning so much about EE. I think I noticed a typo that confused me at first until I read the documentation:
{if scripture_verses}
is the same as saying:
{if scripture_verses == “”}
I think you meant to say
{if scripture_verses != “”}
by Mike Boyink (Author)
Date: Monday, January 19th, 2009
Comment: #13
Good catch Trevor - I updated the post to correct that.
by Kevin
Date: Monday, November 24th, 2008
Comment: #1
Mike,
Thanks for the next series installment! Regarding the Wimpy Player, is it part of your plan to create a playlist from EE to play in the Wimpy Player (such as latest 10 sermons, or playlist based on the sermon series selected)? Just wondering if your intention would be to touch on playlists / feeds?
Where I see EE being so powerful as a church CMS is in podcasting / media presentation. You could dynamically create an RSS feed for any of the following: all sermons, a certain series, by or even by speaker (Weird, I know, but maybe if you like to follow a particular speaker).
Regarding media presentation: On a sermon series page you could have an xml feed dynamically created by EE for an online Flash player such as Wimpy / JW Player of the sermons (sorted by date) right on the website! No PODCASTING required!
Mike, thanks for so thoughtfully working through this series. I pray that many a church/designer will buy this series as an e-book when the series is complete, and aim to reach the world even more effectively with the Good News!
Kevin