CCK Formatters: Creating an Audio Widget from a URL

Jul 22, 2010 · by Suzanne Kennedy Dergacheva

CCK formatters are useful for theming content in a sustainable way. Instead of creating piles of template files to format content types, you can create re-usable CCK formatters and select how your fields are formatted using the "Display Fields" tab of a content type.

For demo code and useful slides about creating CCK formatters, take a look at the CCK formatters session that Jody Hamilton gave at Drupal Design Camp in June.

I recently created a CCK formatter module to display audio widgets from raw audio files. The MP3 Player module comes with a CCK formatter to display filefield audio uploads as audio widgets. However, sometimes audio files can be really large, particularly if they're really long and uploading them as a filefield is not ideal. Sometimes, you want to allow your users to upload audio files via FTP and then reference them using a URL.

So I created a formatter to display the URL to the audio file as an audio widget. The formatter is available to text fields rather than file fields. In this case, creating the CCK formatter was easy because the MP3 player module already provides a theme function for turning audio files into audio widgets. Below is the code from the module file


 * Implementation of CCK's hook_field_formatter_info().
function mp3_field_field_formatter_info() {
  $formatters = array(
    'audio_widget' => array(
      'label' => t('MP3 Audio Widget'),
      'field types' => array('text'),
      'description' => t('Displays an MP3 file upload as an audio file'),
  return $formatters;

 * Implementation of hook_theme().
function mp3_field_theme() {
  return array(
    'mp3_field_formatter_audio_widget' => array(
      'arguments' => array('element' => NULL),

 * Theme function for a custom formatter.
function theme_mp3_field_formatter_audio_widget($element) {
  $output = theme('mp3player', 'Default', $element['#item']['value']);
  return $output;

After enabling the mp3_field module above, I choose the "MP3 Audio Widget" formatter on the "Display Fields" tab of the podcast content type. I can move around the field in the "Manage Fields" tab just like any other CCK field. You resulting page looks something like this:

St. Thomas's Anglican Church Audio Player

Suzanne Kennedy Dergacheva

About the author, Suzanne Dergacheva

As co-founder and front-end lead at Evolving Web for the past 9 years, Suzanne is responsible for defining and implementing both the information architecture and the visual elements of websites and web applications. She manages the creation of Drupal sites from module selection and configuration to integration and custom development.

More Articles by Suzanne Dergacheva »

Featured Articles