Creating custom templates for MediaFront

Last updated February 14, 2013. Created by travist on May 5, 2012.
Edited by aniebel, bdone, EnjoyLife. Log in to edit this page.

One of the major features that MediaFront offers is it provides site builders the ability to completely build their own media players by using basic HTML5, CSS, and JavaScript. It employs a very flexible system where every template has complete control over the media player to modify not only how it looks, but also how it behaves.

Creating a custom MediaFront template.

Before we begin, we must first create a custom template so that we can make as many changes as we want without having to modify the ones provided by MediaFront. To do this, we will simply copy the SimpleBlack template and create our own template where we can put our own custom functionality.

• Create a custom module to house your templates. There is a lot of documentation on how to do this elsewhere.
• Create a folder in your module called templates and copy the simpleblack template folder @ players/osmplayer/player/templates/simpleblack within the MediaFront module directory into templates folder within your module.
• Do a mass rename of everything 'simpleblack' in that folder (including filenames) to whatever you want to call your template.
• Implement the following hook in your module...
  
  /**
* Implementation of hook_osmplayer_info
*/
function mymodule_osmplayer_info() {
  return array(
    'templates' => osmplayer_get_templates(drupal_get_path('module', 'mymodule') . '/templates')
  );
}
• You can then modify the *.tpl.php file within that template to make changes... the CSS file is in the CSS folder....

Understanding MediaFront player templates

Now that we have a custom template, it is important for everyone to understand how a template works in MediaFront, and to do that, it is useful to refer to the template that we just created. Let's assume that we called it 'mytemplate'.

• osmplayer.mytemplate.tpl.php -- This is the Drupal template file which can be overridden like any other tpl.php file.
• css - This is the css folder which works like any other CSS files and images.
• js - Contains the template javascript override files.
  • osmplayer.controller.mytemplate.js -- template controller class that derives from the base controller class minplayer.controller.js
  • osmplayer.playLoader.mytemplate.js -- template playLoader class that derives from the base playLoader class minplayer.playLoader.js
  • osmplayer.mytemplate.js -- template player class that derives from the base player class osmplayer.js

The actual template file (tpl.php) and the CSS files are actually very easy to understand since they behave like any other template in Drupal. The JavaScript files, however are different since they allow you to have complete control over the media player and also provide your own custom behaviors within your template. In order to understand how these work, it is important to understand a little about Object Oriented programming since templates are just simply derived classes from the base classes which provide the bulk of the functionality.

To give an example of this, lets suppose you wish to show the body of the node within the template of the media player.

• The first thing we need to do is add the body element to our template....
  
  <div id="mediaplayer_node">
  <div id="mediaplayer_body"></div>
  <div id="mediaplayer_minplayer">
         ....
  </div>
</div>
• Next we need to let our osmplayer.mytemplate.js file know about the new element. We do this within the getElements method.
  
    // Get the elements for this player.
  osmplayer[template].prototype.getElements = function() {
    var elements = osmplayer.prototype.getElements.call(this);
    this.display.width(this.options.width);
    this.display.height(this.options.height);
    return jQuery.extend(elements, {
      player:this.display,
      body: jQuery('#mediaplayer_body', this.display), /** ADD THIS LINE */
      minplayer: jQuery('#mediaplayer_minplayer', this.display),
      display:jQuery('#mediaplayer_display', this.display),
      media:jQuery('.minplayer-' + template + '-media', this.display)
    });
  };
• We can now reference this.elements.body within our template code to populate the new field. You can do this by OVERRIDING the base loadNode method found within osmplayer.js. Because we are overriding here, we can simply use the base classes version, and then just add to it like so within our osmplayer.mytemplate.js file since it derives from osmplayer.js.
  osmplayer[template].prototype.loadNode = function(node) {

  // We must call the base class so that is uses its
  // implementation of loadNode first.
  osmplayer.prototype.loadNode.call(this, node);

  // Now set the body to the node body field machine name.
  this.elements.body.text(node.body);
};

Hopefully this explains how you can add as many fields as you want to your template.

More to come....