Build A Podcast Archive In Drupal 7Build A Podcast Archive In Drupal 7

Categories:

Podcasts are a great way to let your users take your content with them. Whether you produce podcasts as your main delivery method or you do them in addition to your existing website content, you are going to want to maintain an easy to use archive and delivery system for all of your podcasts. Today we're going to go through the steps required to build such a site.

Let's take a look at what we are going to be building today:



Podcast Archive



Getting started

I'm going to be using Drupal 7 along with Views and AudioField. The first time I did this project I tried to used the Media module, which is a more comprehensive solution that works with video and images as well. However, in setting up Media, it wouldn't let me save any of my podcast content (it returned an invalid field message). Suggested fixes did not seem to work for me. I still believe Media should be the preferred module choice for the long term and I would encourage everyone to try and configure that first. AudioField is obviously targeted at audio applications, and for this project it will work just fine.

Go ahead and install Drupal 7, Views and AudioField. I will use the Wordpress audio player, which is a simple player that will allow your users to preview podcasts in the browser and then download them. As a note, you need to install the player into the sites/all/libraries/player/audio-player directory. Once installed, go to the AudioField configuration page and make sure the player shows up and is selected.



Settings


Next thing is to set up taxonomy for your podcasts. We'll be building a special taxonomy-based menu that will help filter categories from our archive View. I'm going to set mine up with a pretty simple 4 or 5 term taxonomy list that is selectable by drop down.



Settings


Let's create our "Podcast" content type. Let's save and add a new field. I'm going to call mine "Podcast" which will be a file field with an "Audio Upload" widget. This will allow AudioField to automatically configure everything to work with our player. I will also add a "Category" field which will be  a term reference select list. The list will be populated by the podcast category taxonomy that I just created. I'll use the body text of the content to write a description of that podcast. If you're really proactive or want to be accessible to the visually impaired, consider adding an additional field with an additional file upload. You can use that to add a transcription of that episode of your podcast. Lastly I'm going to reorganize the order of my fields as shown:



Settings


The last thing now is to populate my site with podcast content. For this demo I'll be adding about 10 so I can get a good idea what my views will look like.

Building an archive with Views

Let's set up Views so that we can display the contents of our podcast archive. I'm going to create a new View called "Archive." I'm going to restrict showing content of type "podcast" and create it as a grid page without links. As I want fine-grained control over what I am displaying, I will show fields as opposed to teasers. I'm going to display 9 items at a time (3 by 3 grid). Save and continue to edit.



Settings


I'm going to be setting up our Views so that we don't have to mess with separate template files or conditional styling. The first thing we need to do is get our grid styling ready for themeing. Under "Format: Grid" go to the settings. I'm going to add a row class "archive-row" for targeting later with CSS if needed. I also will reduce the columns to 3. Remember, I'm going for a 3 by 3 grid.

Next we need to add in our fields. The title field should already be included. If not, add it. The great thing about Views is it has a lot of built in functionality that will aid in our themeing. Any field can be wrapped in defined HTML tags or predefined classes. For our title I'm going to put our podcast title in an H4 tag.



Settings


Next I'll add the category field (Content: Category), body text (Content: Body), and audio field (Content: Podcast). For all of these I am omitting the labels. For the body, I am going use a formatter to trim the text length to 150 characters. This should suffice for preview text but you should increase this value to suit your needs.

I want people to be able to use a menu to filter the archive by category. There are 2 ways of achieving this. The super simple way is to add Filter Criteria: Content: Has taxonomy term and then expose the filter for visitors. This will create a dropdown at the top of the View with the ability to filter the View results. I prefer a more styled approach. I am going to set up a contextual filter that will look for the category at the end of the URL. That way I can create a custom menu in my sidebar and style it however I like.

Add a contextual filter: Content: Category. When the filter is not in the URL we want to display all results. So when someone goes to mysite.com/archive, they simply get the full archive. However, when the link points the site to mysite.com/archive/design I want to return the View with only design podcasts. I'm going to also override the page title to be a variation on "Archive: Category." In order for this to all work we need to validate the URL. Otherwise you could type in mysite.com/archive/fd6fs45sgg98 and get a valid page. We are going to use the taxonomy term validator with our podcast categories selected. Filter value is going to be "Term name converted to Term ID" and if your categories have spaces then check the box to add dashes.


Settings


After all is said and done, my preview looks something like this:



Preview


Make sure and save your View and let's move on.


Category Filter

Next we need to add a menu to the Drupal system for our category filters. Create a menu and Populate it with your taxonomy terms. Link them to "archive/taxonomy-term-here." Go into the block configuration page and add the menu as a block. I set my visibility settings to "archive" and "archive/*" to restrict the block to archive pages. In the end my archive looks like this:



Styling



Styling

The specifics are really going to depend the theme you have chosen. However, as a basic guide the first thing I'm going to do is set all the styles for my menus. I'm going to export a special menu highlight for the active menu item:

 

.sidebar .block { background:none; padding:0; margin:0; border:none;}
.sidebar .block h2 { text-transform:uppercase; letter-spacing:0.2em; margin:0; padding:0 0 10px 0; font-size:0.9em; border-bottom:none;}
.sidebar .block ul.menu { margin:0; padding:0;}
.sidebar .block ul.menu li { list-style:none; margin:0; padding:0; }
.sidebar .block ul.menu li a { width:200px; height:29px; margin:5px 0; padding:0 0 0 10px; line-height:29px; float:left;}
.sidebar .block ul.menu li a.active { background:url(../images/active-list.png); color:#888888;}


Next let's do some basic table styling. We'll add a very soft outline to separate the different cells. It's great that Views adds its own CSS classes, which makes targeting your View pretty easy.

 

.view-pod-archive table { margin:0;}
.view-pod-archive tr { background:none; border-bottom:1px solid #eeeeee;}
.view-pod-archive tr td { border:none; border-right:1px solid #eeeeee; padding:20px 20px 30px 20px; width:50px;}
.view-pod-archive tr.row-first td { padding-top:5px;}
.view-pod-archive tr td.col-first { padding-left:0;}
.view-pod-archive tr td.col-last { padding-right:0; border-right:0}

 
Lastly let's get the field styling. Since we are displaying a lot of information here I'm going to knock down the font size. You may want different settings depending on your audience, preferences, or theme.

 

.view-pod-archive h4 { font-size:1.3em; margin:0 0 5px 0;}
.view-pod-archive .views-field-field-podcategory { font-size:0.9em; margin:0 0 5px 0;}
.view-pod-archive .views-field-body p { font-size:0.9em; line-height:1.4em; margin:0 0 10px 0;}
.view-pod-archive .audio-download { margin-top:6px;}
.view-pod-archive .audio-download img { margin:0 3px;}
.views-field-field-podcast { font-size:0.9em; line-height:1.4em; width:200px; overflow:hidden;}

 

Once you are done you should have something pretty close to the end result. I added an "All" item to my menu which is selected by default. I also replaced the default Drupal audio file association icon (modules/file/icons):

 

End Result


I'm not personally thrilled that the default grid view uses tables instead of divs (considering there is a separate table format). Tables are meant for tabular data, not layout. If you are feeling adventurous you could always display your archive as an unformatted list and then create custom views TPL files to make the cells into divs. In the end you'll probably have more semantic and style-friendly markup but it is so many extra steps that it will take a bit of knowledge and commitment to pull off. The default grid gets the job done, but for a client project I would definately convert the grid to divs.

And there you have it. Feel free to experiment with other useful filters. If dates are important to your podcasts, consider adding filters for year or month.

Enjoy!

David's picture

What route would you take to allow people to subscribe? Such as an iTunes compatible feed?

Matt's picture

Hi David,

Views allows you to easily create an RSS feed when you create your View. You simply check a box and then specify what URL path you would like. You can then create a block with a link and place it in the sidebar underneath the filters.

Need a Custom Designed Theme?

If you need a custom designed theme for your business then our designers can work with you to create a unique concept that is consistent with your brand, clearly communicates your value proposition and helps you achieve your goals. >> Click here to contact us and let us know about your needs and we'll analyze and provide you with an estimate for designing and development your custom theme.