Launching MTV UK's new website

The new MTV.co.uk website has finally launched, completely powered by Drupal 4.7+ (plus a few theming patches that I wrote for Drupal 5.0).

For this project, I was one of the co-architects where my primary role was to figure out how to make Drupal look like MTV wanted–not a simple task to say the least :-) The intial MTV designs had over a dozen complex CSS files, along with hundreds of images. Additionally, each piece of content could be themed differently to fit the channel (e.g., MTVUK, MTV2, VH1, Flux, etc.) it was associated with–on occasion, multiple channels too. Under each channel there were different sections that all had different types of layouts, from 1-3 columns, to various amounts of associated content (e.g., blocks).

The basis of my method for solving this problem involved a heavy use of Drupal’s taxonomy system along with a custom theming engine I wrote–one that existed on top of phpTemplate. In a nutshell, I used the taxonomy system to classify each piece of content with both the channel and section it was associated with. From there, my custom theming engine could then determine what channel was associated with each piece of content. With the correct term figured out, the engine could then determine what type of layout to employ–either a 1, 2, or 3 column layout–along with any special headers and/or associated content (blocks) to show with the correct layout. Once all of this was figured out, the correct CSS was loaded for the channel, along with all of the images for that channel.

In terms of code, there was only one template for the entire site–a single page.tpl.php, filled with variables and about a half-dozen helper template tpl files–one for node.tpl.php, block.tpl.php, and some for custom CCK types. So only a handful of actual Drupal template files, a dozen+ CSS files, and a couple hundred images and voilá, the MTV theme in a nutshell :-)

Of course there’s more to theming than just the custom theming engine above. A lot of the battle was getting Drupal to output correct HTML and CSS in many places–so yes, there were a fair amount of overrides, along with lots of custom code to just grab the content and mark it up in a proper fashion. As a result of many “fights” with Drupal, I wrote a couple patches to change Drupal’s default behavior. These included a patch to theme_links() to return a semantic list of links, fixing hook_link() to return a structured set of links (which also fixed primary and secondary links to do the same, along with adding default CSS classes to all links for easy icon theming), and a number of other CSS related ones that I’ll get into detail in a later post.

With the technicalities aside, the new MTV UK website is awesome. It’s hoping to be a competitor in the MySpace arena and is hoping to 1-up the competition by integrating videos and custom 3D avatars built by DA Group into the site, along with integrating the whole web experience around their new TV channel Flux, slated to go live Sept 2006. In reality, MTV UK is not trying to directly compete with an online community like MySpace but rather, is creating a community that is more of an extension of their interactive TV shows–something we don’t have in the US. Very cutting edge stuff, including users being able to control what is shown on TV simply by texting in various commands through their cell phone!

For more hype and details, have a watch of this CNBC interview.

And for more media glamour, there is of course the official Lullabot press release, the Drupal announcement, and of course the Digg (current front page story for the Entertainment section).