Creating node playlists with MediaFront

This tutorial was sponsored by Kani Design's. Thank you for supporting MediaFront!

Introduction

A very common request that I get from people who wish to integrate media in their site is how they can construct their Drupal website that would allow for each node to have its own playlist. A good example of this would be a music website that wishes to have audio albums where each album can have its own audio tracks. The typical notion that most people have when trying to implement this type of structure is to simply attach many audio files to a single content type called Album, where each audio file attached would act as the track for that album. However, this is not a very robust way to handle this since not much information can be provided for each track within the album. For example, let's suppose that we wish to provide a Title, Description, Songwriter, etc to each track loaded into each Album. This type of setting can not be accomplished by simply uploading many files to an Album track. The answer to this problem is going to be covered in this article, where I will explain in full detail how to create parent / child relationships between content types, and then populate the Open Standard Media Player to show those tracks in each album.

Prerequisites

In order to follow along with this tutorial, it is assumed that you are already familiar with Drupal administration and have already been through the Drupal CMS MediaFront & OSM Install Guide. You will also need to make sure you have the following modules installed.

Ok, we are now ready to begin!

Step 1: Create the Album and Album Track content types

In order to allow custom data to be entered about each Album, and also allow custom data to be entered into each Track within that album, we will need to create two different content types to hold that information. Follow these steps to create your two content types

Navigate to Administer | Content Management | Content Types, and then press the button that says Add Content Type
From there, you will need to enter the following text to create your Album content type.
Now press the Save content type button.
Now repeat those steps again, but this time for the Album Tracks content type. For the configuration, use the following settings.

Step 2: Add the audio upload to the Album Track content type

The next step we will take is to setup the album track content type so that the user can upload an image and an audio track that will play in the media player. We can do this by following the following steps.

Click on the Manage Fields link next to the Album Track content type.
We will then add a new field by filling out the following data in the Add Field section.
From there, we will want to fill our our help text for this audio upload field along with provide the Permitted upload file extensions for an audio track.
Now save your new upload field by clicking the Save field settings button.
We can now drag our new upload field to the top of the form using the cross bar icon as follows.
Make sure you save these settings by clicking on the Save button.

Step 3: Add the image upload to the Album Track content type

To add an ImageField, we will provide the following in the Add Field fields.
The default settings for an image field are just fine, so on the next page just press the Save field settings button.

Step 4: Install and Configure the Node Relativity module

In order to setup the parent / child relationship needed to have a playlist within each Album content type, we will use a great module called the Node Relativity module. Please follow the following steps to Install and Configure this module.

Download the Node Relativity and extract it in your modules folder.
Install this module in the Administer | Site Building | Modules section.
After you install this module, now go to Administer | Site Configuration | Node Relativity
In the first page, we will first select the nodes we wish to relate together, and then press the Save Configuration button.
We will now setup the Album / Album Track relationship by providing the following settings in the next page.
Save these settings by clicking on the Save Configuration button.

Step 5: Create your Albums and Album Tracks.

In this next step, we will add our new albums and then add each track to those albums.

Add a new album to your site by going to Create Content | Album, and then give your album a title. Press Save button at the bottom to create your new album.
You should now see a new section called Link operations and a link that says Create new Album Track. Click this link...
This will take you to a new page where you can now upload your Audio track and image for that track.
After you save this node, you will then be able to navigate back to your parent Album by clicking on the link within the section that says Parent Nodes.
Once you are back to the parent node, repeat the previous three steps until you have an Album full of tracks like so...

Step 6: Create your view.

The next step is to create a view that will allow the Open Standard Media Player to show each playlist inside of the Album node type.

Navigate to Administer | Site Building | Views
Add a new view by clicking on the Add button and then provide the following information.
Assuming you already know how to setup Views, you will need to add a Filter for a Published content type of Album Track. We will also add a new Field of Node: Title as shown below.
Next we will link up the Album and Album Track content types using the Relationships section. We will now add a new relationship by pressing on the + button next to Relationships section.
Now, within the Relationships section, we will need to add the Node Relativity: Parent Node ID relationship.
We can now just press Add, and then just leave the default options by pressing Update
Now we need to be able to filter the album track nodes based on the parent node ID. We can do this by adding a new Argument to our view by pressing the + button next to the Arguments section.
In the arguments setup, we will want to select Node: Nid and then press Add
In the next options section, we will then need to make sure that we select the Relationship drop-down to select Node
Now press Update to update that argument, and then press Save to save the view.

Step 7: Configure your node template to show the media player

Assuming that you already have MediaFront installed and have created a preset called player, this next section will now discuss how we can modify the Album content type to show the media player with all of the tracks in that album.

The first step that we will need to do is download a module that makes changing the node templates really easy. This is called Content Templates. Download & Install this module in your Drupal site.
With Content Template installed, we can easily edit our Album node template by navigating to Administer | Content Management | Content Templates, and then click on the edit template link next to our Album content type.
Within the Body section, we can then use the MediaFront API to show the player preset along with passing an argument which will be the node ID of the parent Album node. This will then trigger views to filter the Album Tracks nodes based on that parent node ID. Our body template should look like the following...
Now, you can save your Content Template, by pressing the Save button.
Now navigate to your Album for a pleasant surprise!!!