Look, No Programming! Handling Multimedia with CCK

On a site with a lot of content and authors, like a news site, you need to allow non-programmers to handle multimedia in a simple way...

Multimedia is a very broad term that covers a lot of different data types and usages. If you are using flash for a specific purpose on a few pages, you can use JavaScript to customize the appearance and the functionality. However, on a site with a lot of content and authors, like a news site, you need to allow non-programmers to handle multimedia in a simple way.

When building our publishing system, I added functionality to allow an author to show flash, audio and video on a page by simply uploading files or copy/paste embedding code from a hosting site such as Vimeo or YouTube. Files served by your web server are handled differently than the ones hosted by third parties such as YouTube or Vimeo, so you need two sets of fields:

Third party-hosted media – I used the Embedded Media Field (http://drupal.org/project/emfield). I installed the module files and then activated the Embedded Audio Field and the Embedded Video Field in the CCK section of admin/build/modules. The standard settings will give you a perfectly functioning system and allow any source to be embedded. The configuration preferences at admin/content/emfield are used to restrict the sources of the media and to turn on/off some specific option for a source such as “Show related videos” on YouTube, player color and so on.

With the module installed and configured I have created the custom fields—I have extended the standard Story content type. In the “Manage fields” tab of the content type I can see an “Embedded Audio” and “Embedded Video” options in the “ - Select a field type – “ pull down. I created an audio and video field and enclosed them in a “Third Party Hosted Media” group to avoid confusion. It is always a good idea to add help text to the groups and fields you create in order to clarify the scope and use of the fields.

Media hosted on your server – Uploaded media is handled by the SWF Tools module (http://drupal.org/project/swftools). This is a very large module with lots of options and can be very confusing to understand and configure. Below, I will explain the settings and options you need to allow a writer to attach multimedia to stories:

I installed the module files and then activated SWF Tools in the SWF Tools section of admin/build/modules. I choose to stick with direct embedding since I would not use custom JavaScript. Therefore, I did not activate any of the embedding methods such as SWFTools or UFO.

In order to show the media on your site, you'll need a media player, so I activated “1 Pixel Out” for audio, “JW Media Player 4” for video and “JW Image Rotator 3” for slide shows.

Next I went to admin/settings/swftools to edit the settings and configure the components:

1. I left the “Embedding settings” at the default values of “Direct embedding” method and Flash version 7, you might want to determine what are you Flash minimum requirements.
2. I checked the “Play immediately (play)” box because otherwise IE7 will not activate the player and the user will have to click twice. The media will not actually play immediately since it is under the control of the player.
3. Next I configured the “File handling." You can use different players for different kind of files so I choose JW Media Player 4 for single FLV movies, 1 Pixel Out MP3 Player for single MP3 files, SWF files are handled by Flash itself so there is no player. JW Image Rotator 3 handles a list of images (i.e. a slide show), and I selected none for a list of FLV movies, MP3 and mixed media because I did not add playlists support in the Story content type. I added the following extension in the “Private file system group: swf flv xml mp3 jpg jpeg png.
4. I left the “Generic players” settings at default and started to configure the players. I configured the size for all the players and the transition for the image rotator, and left the others at default values. Clearly each site has its own requirements and the players are very configurable.

At this point I went back into the Story content type and added the CCK fields. I added a file type field and called it "multimedia." I set it to 1 value, “disable” List field and Description field and allowed the following file extensions: flv mp3 swf. In the Display fields for the multimedia fields I selected “SWF Tools – no download link” for full node and hidden for everything else. This links the field with the SWF Tools module so it can handle the file types appropriately as I have configured them above.

Then I created another file type field and called it "slideshow." I set the number of values to unlimited, “disable” List field and Description field and allowed the following file extensions: jpg jpeg png gif. In the Display fields for the multimedia fields I selected “SWF Tools – playlist” for full node and hidden for everything else.

Finally I created an “Uploaded media” group and enclosed the two fields in it.

Now my Story content type can handle a variety of multimedia using a simple interface. Extensive help text assists the user in determining which field to use.