Configuring playlists using Views

Note: This information applies to the 7.x-2.x version of MediaFront.

How playlists are configured depends upon your implementation needs and can be adjusted as your needs change. Below are a few examples of how Views can be configured with MediaFront.

If you have not done so already, install Views and CTools and enable these two modules including the Views UI module.

Creating a view with one large media player and built-in playlist

Please note: you will want to setup a preset for this view as outlined in the previous section

1. Go to Administration > Structure > Views. Click “Add new view”.
1. Name the view (we'll name it media for this exercise).
2. Select Show “content” of type “media” (This is the content type that contains your video).
3. Insure the “Create a page” is checked.
4. Click “Continue & edit” button.
2. Change the For option to “This page (override)”
3. Configure the View’s FORMAT settings to the following:
1. Format should be change to
1. MediaFront Player
2. Setting should be set to:
1. Your “MediaFront Preset”
3. Make sure the “For” is for “This page (override)
4. Click “Apply (this display)” button
4. Configure the View’s FIELDS setting to the following:
1. Modify the existing Content: Title by clicking on “Content: Title”
1. Check Exclude from display
2. Under “MediaFront Settings” select Title as the Field Type.
3. Click “Apply (This display)” button



2. Click Add to add the image field to the view
1. Find and select your image field
2. Click “Apply” button
3. Unclick “Create a label”
4. Set Formatter: Image
5. Image style: None (original image)
6. Link image to: Nothing
7. Under “Mediafront Settings”
1. Field Type: Image
2. Preview Style: Original Image
3. Playlist Style: thumbnail
8. Click “Apply (this display)” button



3. Click Add to add the media field to the view
1. Find and select your video field
2. Click “Apply” button
3. Unclick “Create a label”
4. Set Formatter: Generic file
5. Under “Mediafront Settings”
1. Field Type: Media
2. Media Type: Media Content
6. Click “Apply (this display)” button



4. Click the “Save” button. After the view has been save you will be able to see the view.

Sample View page

Sample View Output


View with one large media player and a grid of files below

1. Add a new page to your existing view: Click Add in the Displays section and select Page from the dropdown.
2. Click Page next to Display Name and change the name to Media Grid. Click apply.
3. In the Format section, click MediaFront Player to edit the format. Change Format to Grid and make use you the For dropdown box from All Displays to This page override. Click Apply (this display).
4. Under Header, select Global: MediaFront Player for This page. Hit Apply (this display). In Configure Header, set MediaFront Presets to player. Under MediaFront Settings, field type should be set to none. Apply this display.
5. Under Page Settings, set Path to media-grid. Hit Apply.
6. Visit yoursite/media-grid. You should see a large media player with a grid of files below the player.
7. Optional: If you want the files below the player to control the player, see "Dynamically linking fields to the player."

View with a grid of miniature media players

1. Set up the preset.
   • Go to Structure > MediaFront Presets > Add Preset.
   • Select a name for your preset. Let's name it gridplayer.
   • Add a description if you want. For Media Player, select Open Standard Media Player. Hit Next.
   • You will see a preview of how MediaFront will display your media content.
   • Go to Preset Settings > Player Settings > Playlist Settings> Display Settings. Select Disable playlist. Save preset.
   • Under Presentation Settings, set Player Width to 200px and Player Height to 150px.
   • Save preset.
2. Set up a View page to display mini media players.
   1. Go to Structure > Views and edit the view named media.
   2. In your view, hit Add page under the Displays section. For Display name, we will name it Media Grid.
   3. Under Format, set Format to Grid and apply to this page. Hit Apply (this display).
   4. Under Page Settings, set Path to gridplayer. Hit Apply.
   5. Under Pager, set items per page to 16 for this page. Hit Apply (this display).
   6. Under Fields: Content Type: Media Upload, set Formatter to MediaFront Player and MediaFront Presets to gridplayer. Apply (this display).
   7. In Fields: Content Type: Image Upload, make sure Exclude from display is selected. Apply (this display).
   8. Hit Save.
   9. Visit yoursite/gridplayer. You should see a page of miniature media players.

Dynamically linking fields to the player

Videos can be loaded dynamically into the player by linking a field to the player. Within your view administration, edit the field you would like to dynamically link to the Media Player. Within the MediaFront Settings of this field, click the box next to "Link to Player". Save the field and view.