How to Use jQuery Media for Audio & Video

I sometimes hear a complaint that jQuery Media can't be used for both audio and video on the same site, because it makes the player too large.

This is not true at all. Although it does currently require some finagling.

I plan to reconfigure the module soon to make it easier to pull in the proper configurations for audio and video. Meanwhile, here's a quick hack.

jQuery Media for both Audio and Video

1. Enable the FileField module and create types for your audio and video clips.

2. Enable the jQuery Media module, and configure it for your custom video node type. We won't turn it on for the custom audio type, because we'll be calling it manually, coming right up.

3. Make sure you have a media player installed in the file directory and configured properly at /admin/settings/jquery_media (or /admin/settings/jq if you're using the jQ module). I suggest JW FLV Media Player for now, as Drupal's Media Player doesn't yet support audio. Just stick it in the site's root directory to work automatically, or put it wherever you want and configure jQuery Media with the proper folder.

4. In your theme's template.php, create the following function, replacing 'custom_audio_type' with your site's custom audio content type.

function phptemplate_preprocess_filefield_file(&$variables) {
$node = node_load($variables['file']['nid']);
  if (
$node->type == 'custom_audio_type') {
$variables['classes'] = 'filefield-file-audio';
    if (
module_exists('jquery_media')) {
jquery_media_add(array('media class' => '.filefield-file-audio a', 'media height' => 20, 'media width' => 200));
  else {
$variables['classes'] = 'filefield-file';
$variables['original_file'] = $variables['file'];

(Note: we need to copy the $variables['file'] to a new variable because of a known bug in Drupal 6 at

5. Create a filefield_file.tpl.php file in your theme directory, with the following code:

= $original_file['filepath'];
$url = file_create_url($path);
$icon = theme('filefield_icon', $original_file);
'<div class="'. $classes .' clear-block">'. $icon . l($original_file['filename'], $url) .'</div>';

That's it. It should work automatically after that. Note that this tutorial assumes you're using Drupal 6.4, CCK 6.x-2.0-rc6, FileField 6.x-3.0-alpha4, and jQuery Media 6.x-1.4-beta1.

Note that I write about this in more detail in Drupal Multimedia (pre-order now)!

Inline Video with jQuery Media!

Here's a two-step formula for simple inline video, assuming you have jQuery Media installed on your site, doing both of these configuration steps from Administration > Site configuration > jQuery Media (at /admin/settings/jquery_media):

  1. Open the Node types field set and check the node type for which you wish inline video.Check off Node Type
  2. Open the Classes field set, and enter .node .content a in the Media class text field. (You can separate classes by comma if you want to keep existing class invocations.)Set Media Class

Then just add a link to a video inline to your content. Doesn't matter if it was uploaded with the node or through FTP. (The second step assumes you're using the Garland theme, or another theme that uses that CSS class designation. You might need to check the node in FireBug if you're not sure.)

Notes: This method is easy, though admittedly a bit heavy-handed. The down-side is it will be invoked regardless of whether the node actually contains a video link (fortunately it's a lightweight jQuery plugin). If you want more fine-tuned control, you can skip the first step, use a PHP filter, and just invoke it manually from in your node, using jq_add('jquery_media') (assuming you have the jQ module enabled; jquery_media_add(); otherwise). (I don't actually recommend that, because of all the security issues involved. Just stick with the first method.)

The cool thing is this will work with pretty much any media player, including the upcoming Media Player for Drupal!

Minimalist Drupal Themes

Don't get me wrong; I like Garland. It's sleek, it has an easy-to-configure color scheme, it works well out of the box. And it's identifiably Drupal, which, though sometimes thought to be a criticism, is not a bad label for the blog of a Drupal developer, such as the blog you're reading.

At the same time, I'm interested in spending some time creating a unique theme for my blog. I develop eight-plus hours a day, and it's time I eat my own dog-food. Granted, I haven't actually done any design work in over three years, but I do have some background with that.

So I've been looking at some of my favorite blogs to get some ideas. And discovering an interesting trend.

drupal4u screenshot

Chx's Drupal4hu is simple, with little clutter on the screen, but very identifiably Drupal oriented. screenshot

Jame's Walker's features his most recent blog post, with a listing of the next few post titles beneath, and again, little clutter.

Delocalized Ham screenshot

Then there's Neil Drumm's Delocalized Ham, which evokes a manuscript on paper. His design is a testament to his recent study of Typography, which will also figure into my future directions.

So I'm not entirely sure what I'll do for a design quite yet. But I believe that these simple blog designs highlight the most important element of a blog, the written word.

Splash Screen for Media Player!

Drupal Media Player. Splash screen.

A picture is worth a thousand words.

(Image credit reway2007)

Drupal, WordPress, or Joomla? (A Trick Question)

Drupal, WordPress, or Joomla?

I was recently asked my opinion of whether to use Drupal or one of those other ones. I was going to just write a flippant reply, when I realized I'm not actually qualified to answer the question.

I have never personally used WordPress. I read a comparison of it and Drupal some years ago, and knew even then that WordPress would just never cut it. And I've never looked back.

Now if Joomla had been part of the original question, I would have had slightly more qualifications to answer. I used that once (back when it was Mambo, and for all of three weeks), and was sorely impressed at first. But the glow faded quickly when I realized that though it was slick out of the box, it required more work tearing it down to make it do what I wanted than Drupal's simple building blocks offer. And again, I've never looked back.

However, that's coming from a decade of experience on the web beforehand. I really have no idea if Drupal is suitable for someone just starting out. (That is more generic: the author of the original question is a seasoned developer, and specifically to them I say use Drupal, what are you waiting for?)


I dug up a few comparisons from Google, and they seem reasonable (for someone who doesn't know spit about WordPress). 10 Reasons to Use Drupal has an obvious Drupal bias. WordPress Vs Drupal Vs Expression Engine has a WordPress bias. And WordPress vs Drupal can't make up its mind (its author continues to use both).


I found a few comparisons of Joomla and Drupal, but they're largely out-dated, the first on the list dating from Drupal 4.7. Most of the negative points on Drupal on their list have turned into strong positives since then. That was a thorough comparison, but needs to be revised to warrant its current Google ranking.


From a blog, to a news mogul, to a store-front, to a social network, to a university's portal site, Drupal can handle any of it. Just take a look at this slideshow:

With a strong community of developers, there are easy-to-use tools that can handle pretty much anything you can think of. Its underlying architecture is scalable, its API is robust, and Google loves Drupal; its SEO friendliness is well-known. (Although to be fair, as pointed out on Joomla's forums, they're all SEO friendly, and Wordpress does that out of the box, as opposed to needing to install Pathauto for search-engine-friendly URLs in Drupal.)

My Opinion

The rest of this is largely opinion. Please do the research yourself before coming back and telling me this other can do this or that. Without doing a thorough examination of the CMS options, it doesn't do any of them justice to oversimplify their offerings.

Basically, from my perspective, I'd say, if you are an experienced developer, particularly if you have any programming background at all, you need Drupal. If you are looking to hire a developer for your site, whatever site that might be, you need Drupal. If you are a newbie and want nothing more than a blog, then WordPress might be for you.

However, if you're willing to jump through the hurdle of learning the administrative back-end, then Drupal would likely serve you better in the long run. Particularly if you think you might want things like easy video embedding or customizable content entry. And if you want a blog with multiple authors, or forums, or e-commerce (before you ask, I suggest Ubercart, and that comes from having used both that and e-Commerce, but read Diving into Drupal E-Commerce: An Ubercart vs. E-commerce Comparison first), or any kind of social network, then Drupal hands down is the one for you.

If you want some of that, and want it now, and don't want the hassle of learning, and don't care if it's impossible to change it later, then maybe you should stick with Joomla.

Take your pick.

My Plans for August

Sadly, my plans for August don't include Drupalcon Szeged. Already too much travel this summer, and the dates conflict with a training my partner is doing, so that would be hard on our 4yo.

Back in June, I made a list of personal project plans, so I figure I'll revise that list for the rest of the summer.

First, the status report on the projects from June:

  • I finished writing Drupal Multimedia! And we're about half way through the editing process. The book is scheduled to be published in September, and can be pre-ordered now.
  • The Embedded Media Field port to Drupal 6 is still in process. It's ready for testing on new installations now, but I still need to write an upgrade path from Drupal 5.
  • Morbus Iff and I have made strides with the engine for 5 Second Game. The module allows character creation and the combat engine is nearly ready for play.
  • Except for some experimentation with audio metadata, I ended up not really working on GetID3. I'll probably end up waiting till the fall to work on this, unless I get new inspiration.
  • I haven't written any tutorials yet, but hope to do that regularly once the book has been published and I have more free time available.

New projects of mine in progress and on the horizon:

That's all for now.

Media Player with Dynamic Logo!

Made some progress last night with the Drupal Media Player that I blogged about recently. Dynamic logos!

'/sites/')); ?>

This was created with an hour of tweaking the OpenLaszlo XML, and then pasting the following into this node: print theme('media_player_player', '', array('logo' => '/sites/');

Couldn't be simpler! I see a dev release as soon as we have an icon for the play button!

Of course, playlists and the like will take more. We've talked about including several players, including a light-weight and one with all the bells & whistles, and have the module call the proper one according to passed parameters.

Home-Brewed Drupal Media Player in the Works!

Here's a sneak peek of the new flash Drupal Media Player, developed by yours truly with OpenLaszlo!

Obviously, it's still rough on the edges, and all the options in the theme function aren't hooked up yet. Although it works already (after a fashion), don't use it yet unless you're willing to suffer the consequences.

When it's done, this module will come with its own player, fully GPL'd, and will support others out of the box as well, such as JW Flash Media Player and Wimpy. But who's going to want those anymore?

The module adds theme functions and a simple API that should be easily usable by other media modules, such as Embedded Media Player, jQuery Media and whoever else wants to jump on board. The other modules won't need to worry about where a particular player lives or how to invoke it; the theme functions provided will be robust enough to handle player colors, sizes, icons (including placement, layout, and other customization options), splash screens, playlists and more. Administrators will be able to override any of the defaults, including player of choice. Additionally, it'll be easy enough to invoke manually as well:

print theme('media_player_player', $filepath);

And best of all, since it's in OpenLaszlo and GPL, with the source included in the module, it's easy for developers to modify even the player, without even needing a Flash IDE. (The whole thing is created with an XML.)

Kudos to EclipseGc for nudges and encouragement to get this project going!

Next on the list: volume controls, playlists, override color/logo/splash options, settings pages, pull in the other players, youtube/ provider support, tie into other media modules

(Cross-posted at gdo.)

Erik Gecas's Art Show

So my brother in law (Erik Gecas) has an art exhibit, Painting Physical Presence, that's just opened in Las Vegas! Particularly exciting for me (though admittedly only slightly relevant to the world of Drupal) is that I created his web gallery a few months ago, with Drupal of course. The show is in tandem with Ayako Ono.

The web gallery is largely created with Views Slideshow (for which I still owe a port to d6). In fact, it was largely for this site, which makes a small appearance in Drupal Multimedia, that I beefed up development for that module (and the Magnifier module, that is also used on the site, though not in the book).

SimpleTests for hook_file in Media Code Sprint (Status Report Two)

The Media Code Sprint has been a great success thus far! We have built a fairly comprehensive test suite for hook_file. It still needs to be rounded out, so that, for instance, all the cases for file saving are covered. However, validation is fleshed out, and the framework is pretty much usable and ready for testing gurus to go in and run it through its courses.

Jonathan Hedstrom (jhedstrom) of OpenSourcery joined us this morning, and created the FileDirectoryTest class, finding and fixing some flaws in the current file api in the process. His help was invaluable. And we all quashed other minor bugs and problems in the documentation, so it's been a most successful sprint thus far.

Tomorrow should prove to be productive as well. It's my last day in Portland before heading back east to Pennsylvania, so I plan to make it a great one. Thanks to Advomatic for sending me out to the media code sprint! It's great to work with a company that recognizes the value of Open Source, and reinvests in the community.

Drewish and I will be taking a break in the early afternoon to present a remote session for DrupalCamp Colorado on Drupal Multimedia, where we plan to talk about the state of the art and our recommendations for Drupal 6, as well as a brief overview of the successes of the Media Code Sprint, and what that means for the future of Drupal. See you there!

Syndicate content

The Society for Venturism has chosen me as the recipient of its charity for this year, to hopefully offer me cryonic preservation when the time comes. And this month, Longecity, an excellent forum for the discussion of issues related to extending the lifespan of humans, has offered up a matching grant of up to a thousand dollars to help out! So help out! Please.