Case Study: PulpMX - Drupal as a Rich Media Hub

PulpMX.com was launched in early 2009 as a place for well-known motocross columnist Steve Matthes to post his musings about the sport and its history. Originally conceived of as a modest site, it was built in early 2009 using a stock theme with a handful of custom images, the FCKeditor and IMCE modules to provide a built-in visual editor, and little else. Over time it had grown organically as needs developed: CCK, Filefield, and SWF Tools for posting audio interviews in a built-in player, for example. In early 2010 PulpMX also took on discussion forums from a site that was no longer able to host them, so an existing phpBB installation was also imported.

The site was developing a growing following and it was becoming obvious that it needed an overhaul to better reflect the character of the site, and provide more cohesive and initiative navigation among the quickly expanding areas of the site. Says Steve:

Originally I had gotten Tooth and Nail to design me a basic site for blogs and photos, what they gave me was way better than I had thought I needed. The traffic and the new media things that I was doing (podcasts, slide shows and a live internet show) demanded that I get something new and fresh. I was now big-time I suppose.

New Design: Fluid vs. Backward Compatible

Longtime motocross designer Dawn McClintock developed a compelling new layout that really reflected the character of PulpMX, especially the degree to which the site glorifies motocross in decades past. When it came time to adapt the design to to a custom theme, however, it became clear that we had a choice on our hands: either continue to support aging browsers like Internet Explorer 6, or make the theme fluid and able to adapt itself to screen of varying widths.

Ultimately the decision was made the added flexibility would make the site better suited to a variety of devices (including the smaller screens of mobile devices) that were likely to increase in usage, while users of aging browsers will continue to decline.

In particular, the new design makes frequent use of the variable transparency support in 24-big PNGs, but which the older browsers do not display properly. While it might be possible to develop some alternate styling, the decision was made that such resources would be better spent on developing a mobile-optimized theme, which a high priority for future development. Instead, the IE 6 Update module has been used to advise IE 6 users to update their browser.

Updating the Editor

On a day-to-day basis the site gets little-to-no technical support, so it is critical that adding and editing content requires minimal technical expertise. The older FCKeditor was replaced with CKeditor embedded through the WYSIWYG module. It is a substantial upgrade and has made the editing interface noticeably faster, plus it added the ability to have all unnecessary formatting automatically removed when it is pasted in from a word processor.

The only challenge was implementing the Templates as they had worked within FCKeditor. Templates are critical as they allow Steve to place visuals within his text in a predetermined format, including a place for a caption. WYSWYG doesn't currently support the Templates button, and the existing module that aims to add it in doesn't do so for CKeditor. Two one-line changes were needed to ckeditor.inc, the file that tells WYSWYG what options to make available in the interface.

Drupal as a Rich Media Hub

Steve Matthes works hard at giving his audience perspectives on motocross in a variety of media, including video, audio interviews, and a live, online call-in show. We wanted the new website to act as the central focus for all these.

Video

For video we created a workflow with Feeds and Embedded Media Field where Steve can post his videos directly to YouTube, but they are automatically posted to PulpMX as well. We're hoping that in time Feeds may also support mapping the YouTube thumbnail to the imagefied that displays a preview on the home page as well. Instead, the site currently uses a default image, which can manually repaved of time allows.

Audio

PulpMX is already well known for a number of audio features: brief interviews with current pro motocross riders and team managers from track, podcasts that are typically in-depth interviews with current and past MX celebrities, and an online call-in show that discusses recent developments in the moto industry. Once again, a goal in the design of the site is to the update of all of these as simple as possible.

Interviews

Interviews can be easily posted as Filefield enclosures, and multiple files can be added to a single post. Steve is a big fan of his new iPad, so we set out to find a solution that would allow people to play the audio directly on the page, but one that was compatible across browsers, even those that don't have Flash. SoundManager2 in particular showed some real promise, but for IE in particular it seemed to require a newer version of Flash than many of of our visitors had installed, which meant that they could see the player but not use it. Also, while the 360 player is visually compelling, it does take up a lot of space on screen. jPlayer is less flashy but also seemed to have more modest Flash requirements. We couldn't find a supported way to use a custom UI so we ended up having to hack in a custom graphic treatment, but we've opened up an issue for the jPlayer module in the hopes a future version may allow for a theme to override the default styling. The jPlayer website actually provides PSD templates to facilitate the creation of the necessary graphics, so the only missing piece is a supported method to use the custom graphics within Drupal.

Podcasts

The existing site hosts a number of podcast feeds, and it was our hope to use Drupal as the hub of this workflow. Ideally Steve should be able to record his MP3s, upload them, and then specify the information to go into the various tags. Drupal would configure the XML feed and write the ID3 tags, and the new content would appear on the site and in iTunes simultaneously. Ideally.

After looking into the options available, we found that there seem to be two modules that are currently built for this purpose: Filefield Podcaster and iTunes. Both attempt to solve a similar problem, but using different methods. The iTunes module seems to support a larger array of tags, but neither supported the full array that were already being used, in a software application dedicated to podcasting. The larger issue, however, was the ID3 tags in the MP3 file itself. The dedicated application that had been part of the previous workflow would automatically update these tags to contain the same information. Ultimately we decided that if Drupal couldn't do both of these then it wouldn't actually be saving any time. The Audio module does support writing ID3 tags, but its 6.x release is officially labelled as unstable. We've decided to stay with the manual process until such time as either Filefield Podcaster or the iTunes module support writing ID3 tags, or the Audio module has a stable release.

Over the next few weeks we do hope to work at developing the code necessary to make all of this work, and if it turns out as we hope we do intend to share the code with the appropriate module maintainers.

Forum Integration

The final major piece to address was the discussion forums. In the switch over from phpBB there had been some features lost, even though the Drupal version was using Advanced Forum to provide more parity. In particular, the Markitup editor we were using to provide easy BBCode functionality was lacking three buttons that are very important for forums: smileys, picture, and quote. The first one was relatively easy to add with the Smileys module (though it's unfortunate it couldn't appear as an actual button on the editor), while the other two required some tinkering with the WYSIWYG code that integrated Markitup.

Also, a common complaint with the old version of the forums was images that would overlap the sidebars. It was difficult to control with user-generated content, especially when dealing with externally hosted images. The solution we arrived at was a few lines of jQuery that resize the image to fit within the available space.

A bigger issue was the layout of the forum page. The default forum layout wasn't familiar to people who frequented other popular motocross forums. While it sounds as though the Drupal 7 offerings will be much better in this respect, in the meantime the best solution was to structure the forum display using Views. We were able to get most of the way there using a standard table-based view, combining columns to achieve the structure we were looking for. Most forums also provide icons so users can quickly scan the list to find new and updated posts, so the last hurdle was providing a method for this kind of visual feedback. One option might have been adding some kind of dummy column and use PHP to rewrite the output to an img tag, based on the rest of the row's data. Ultimately, however, we decided we could get the effect we needed by adding a class to the relevant table cell.

One piece we couldn't find an elegant solution for handling was sticky posts. Often on a forum it's useful to designate a post as "sticky", meaning that it will stay at the top of the list. Drupal has a built-in flag for this, but when we structured the view based on sticky status, that field data was no longer available at the theme level for the table. Eventually we resorted to a jQuery workaround. Views puts the grouping field into the table's caption, so we had jQuery hide the caption extract its contents of the caption and convert it into a class, then add that class to the parent table. It all works perfectly, though of course a solution that didn't require Javascript would be preferable.

Taking the Podium

The updated site has been hailed by motocross fans and pros alike as a huge improvement. Says Steve:

I'm super-pumped on my new site, it's colorful, refreshing to look at and has an ease of use that's amazing. The site is night and day better than the old one and the reception that it's gotten within the industry has been great. Everything on the site be it written word, podcasts, shows, photos or scans is easy to get to and everything is where it's supposed to do. Cosmetically, it's about a million times improvement for me, so much so that some readers were comparing it to the industry leaders, the ESPN's of the motorcycling world.

It's a testament to the power of Drupal that a small development team could turn around such a massive overhaul within a short development window. We want to thank everyone who contributes to core in one way or another, as well as the huge effort that goes into contrib modules. Speaking of which, here's a rundown of some of the modules that made the new PulpMX such a success:

Content and Media Handling

• CCK
• FileField
• Imagefield
• Imagefield Crop
• Embedded Media Field
• Feeds
• jPlayer
• Views
• IE6 Update
• Token
• Pathauto
• Transliteration

Administration and Editing

• Better Formats
• Content Type Menu
• WYSIWYG
• IMCE
• WYSIWYG IMCE Bridge

Discussion Forums

• Advanced Forum
• Author Pane
• Captcha
• Comment Notify
• Smileys
• User Stats
• BBCode

Tooth & Nail Design