Warner Brothers Records just launched their new web site which is now running on Drupal. The site is part of a Drupal multisite setup, designed with help from Bryght to meet the needs of WBR and providing the ability for each of their artists’ sites to share the same Drupal codebase (Drupal v5 of course). All code revisions are managed with SVN on a SAMP (Solaris/Apache/MySQL/PHP) stack with APC for caching (go open source!) The video files are delivered using the Akamai CDN network. There are some fun, unique features so be sure to check out the draggable node panel and the nice jquery/interface/ajax(ahah) artist slider! This writeup explains some of the information and details on the setup, modules, content types, and custom parts.

The site was designed by Prod and the site setup, customizing and theme done by Chris and Sarva Bryant from Gravitek Labs. Warner Bros. Records provides their own hosting and infrastructure, maintained by in-house tech geeks Ethan Kaplan and Shaun Haber.

WBR Setup and Theme Details

Here is a listing of the key modules used: (a huge thank you to all the respective developers!)

CCK (and a few cck field types)
Views (plus few additional views modules)
Service Links
SWF Tools
Flash FLV Player (project will be added soon)
Dynamic Views (custom module for ajax slider and ajax node reloads- http://drupal.org/project/dynamic_views)
WBR Utility module (custom, mainly for the theme.)

Content types, specific fields, and views were setup for the news, videos, artists, albums and faq with node references used between the different types to relate content.


The Drupal theme was built from the ground up using Josh Pigford's excellent XHTML/CSS markup and works in conjunction with the wbr_utils module to provide some of its features.

Features Overview

1. Easily skinnable by creating a new style.css file in a sub-directory of this theme
2. Content is turned into a floating/draggable box when a large image is attached to it. The image is set behind the floating box.
3. Nav text and block titles are turned into images if the appropriate image exists in the images/text folder
4. Draggable slider to select artist genre and update the page dynamically (AHAH)
5. Display service links in the right places
6. Custom pager to show next/previous nodes of main content

Important files and directories in the theme:

1. template.php - Main theme file
2. style.css - Main stylesheet
3. page.tpl.php - Markup for the site layout
4. node.tpl.php - Individual node template file
5. block.tpl.php - Single block template file
6. js/interface.js - Interface library to handle special effects
7. js/wbr.js - Setup various special effects
8. images/text - Images that overwrite various titles in the site. Particularly for the main nav and block titles.

Easily Skinnable

By adding a new style.css file, with the option of also adding an extra template.php file, in a sub-directory of the theme, a new sub-theme will be offered at admin/build/themes. This theme will use all of the exact same settings as the main theme, only it will add the extra stylesheet to the page, allowing for a custom look. Features can also be modified by another template.php file in the sub-theme folder.

Floating Content/Images

When an appropriately sized image (685 width) is available in the "image" field of nodes, that image will get displayed as the background for either the full node, or the teaser node if only one teaser is displaying. The image will then disappear from inside the content, and the content itself will get turned into a floating, draggable box overtop the image. The box will be constrained by the boundaries of the image. The position of the box will also be saved when you move it around so when you refresh it will stay where you left it. This functionality is all handled by jQuery in js/wbr.js.

Nav/Block Images

If you upload an appropriately titled image into the images/text directory (eg. nav-blog.gif, block-featured-artist.gif), that image will be used instead of the actual HTML text. The images must include an on and an off state so that roll overs can be setup for the image as well. The off state is above the on state in the graphic and both should be equal height/width. The total height of the graphic will be double that of a single state. Javascript (js/wbr.js) handles setting these up.

Draggable Slider for Artist Genre with AHAH dynamic page updates

Using the jquery Interface library and the custom dynamic views module, dynamic filters (currently only used on artist genre page) throughout the site are turned into a draggable slider. The dynamic filter is typically a standard list of items that, upon being clicked on, updates the content with the filter dynamically. The javascript (js/wbr.js) finds these lists and modifies them appropriately so that the slider.js interface can be applied to it. The rest is handled by styling in the stylesheet.

Custom service links

The service links module doesn't always place the service links in desirables places in the content, so this theme will determine what service links need special attention and displays them appropriately. For instance some service links need to be displayed before the body of the node instead of after.

Custom Pager

Views that use a pager, but only display one item per page will be setup with Prev and Next links to replace the pager. This is complimented by having the view provide a teaser list as a block on the same page. The block, which typically does not support pages, is setup with a standard pager to browse the content.

Custom Modules

The custom modules created for the site to achieve desired functionality are:

1. wbr_utils
2. dynamic_views
3. flvplayer

WBR Utils

The wbr_utils module provides general tweaks and customizations along with helping out the wbr theme. Instead of providing settings through an administration interface, multiple site-specific settings are defined at the top of the module through php defines. These define the names of content type fields, content type groups, and views to be treated specially in the site.

Features Overview

1. Save drag position of floating box
2. Define the main image field and provide settings to select a default image along with a default size imagecache preset
3. Provide settings to select video fields so that it can create the embedded video for those fields using the swftools module.
4. In conjunction with the wbr theme, remove service links that will be displayed elsewhere.
5. Add watch links to video files
6. Extend views functionality by providing duplicate views blocks that replace the "Read More" link with a full-blown pager.
7. Custom display of 2 groups of artist links

Save Drag Position

This is as it sounds, whenever the floating box provided by the theme is moved, it sends its position back to the server using ajax in the form: wbr_utils/drag/x/y This value is then saved to the session and used to set the position of the block on subsequent reloads.

Main Image and default image

The theme handles displaying the image, but the module contains the php define that sets the field that will contain the main image. At admin/settings/wbr_utils you can also set the default image to be used when an image is not set for the field. A setting is available to handle smaller default images used in other areas of the site; specifically for artist thumbnails on the artists page.

Video Fields

At admin/settings/wbr_utils again, you can select fields that will contain urls to a flv file on an outside server (Akamai CDN in this case.) The module then replaces that field for display with the embedded flash code to display the video. The "swf()" function is called to obtain the embedded object which in turn uses the flvplayer module to setup the object.

Pager View Blocks

The views module only allows blocks to have a "Read More" link attached to the bottom so you can view the full page of listings for the view. In order to provide the desired functionality of a block provided by a view with a full-blown pager, duplicate blocks, named Pager Enabled: viewname, are provided with this module. The code to create the block is exactly the same as the views module code, except it passes in the appropriate parameters to the view_build_view function to enable a pager.

Artist Links

With the CCK Link field module the text title displayed for a link can be done in one of three ways: display the full url of the link, display a title specified in the node, or display the text "Link". Displaying the "Link" text is close to what we required, except we needed to be able to define that text in the actual field settings (not in the individual nodes). We wrote a patch that takes link fields inside a particular group and uses the label of the field as the text for the link.

Dynamic Views

The Dynamic Views module provides the functionality behind the artist slider (http://warnerbrosrecords.com/artists). It turns views and views filters in dynamic content. All of the functionality provided by this module is enabled by selecting a "Block/Page Type" (Teaser/Node/List/Table) on a views edit page. Due to limitations in the views module for not being able to create pagers in blocks, this module also provides this functionality.

Features Overview

1. Dynamic filters
2. Dynamic teasers
3. Dynamic nodes

Dynamic Filters

Dynamic filters is what provides the functionality behind the artist slider. 4 new view types are provided for blocks and pages each replacing their respective Teaser/Node/List/Table type: Dynamic Filter: Teaser List, Dynamic Filter: Full Node, Dynamic Filter: List, Dynamic Filter: Table

Each type uses the backend of its parent type to display the content, but wraps both the pager and the content inside div wrappers. The dynamic_views.js javascript picks up these wrappers and attaches the appropriate functionality to them.

Right now the functionality is limited and is only guaranteed to work with filters that are select fields and have "Force Single" and "Force Operator" enabled. The javascript replaces the select form with a list (

    ) of links that dynamically calls back to the server for the updated content for the selected filter.

    Dynamic Teasers/Nodes

    Functionality may be a little unfinished, but, there are 3 cases for these:

    1. Dynamic block coupled with a Dynamic page (same view, either teaser of node)
    2. Stand alone dynamic block
    3. Stand alone dynamic page

    For #1, the module will provide two features. One, it will turn the pager for the block into a dynamic pager. When you click a page #, it will dynamically update the content of the block with the updated page items. Two, if you click on a node url in the block, it will dynamically load the node you clicked on in the main content area. However it will not just load the node page (node/#nid), it will load the page # of the current views page that includes that node. This way it can keep the dynamic content rolling without losing it by going to a node/#nid page. This is ideal by creating a Dynamic Node as the page and limiting the # of nodes to the page to 1 (and possibly turning off the pager)

    For #2, it can just dynamically update the content of the blocks when you click on a pager item, but there is no dynamic functionality when clicking on a node.

    #3 would functionality exactly the same as #2


    The flvplayer provides the capability to setup and create an embedded flash video using the free FLVPlayer. The module does not handle actually determining where to display the video, but coupled with the "swftools" module a custom module can easily create the embedded code using the provided "swf()" function.

    The reason behind using this free player was for its capabilities to play flv files defined in an XML config file that play off a Flash Server and for its skinnability.


    The site was a lot of fun to build and we were happy to get to create some unique functionality and custom modules in the process. So far the response has been great and the site is running smoothly. Let us know if you have any questions and we'll do our best to answer them. :-)


JohnForsythe’s picture

The RIAA embracing open source. Interesting...

Nice writeup. The slider on the artists page is pretty cool.

John Forsythe
Need reliable Drupal hosting?

Liam McDermott’s picture

This is a fantastic write up, thanks for listing the modules and how they were used. It's good to get an insight into other people's setups.

My only question is: did you develop an auto_threaten module so the Warner execs can send out threatening, RIAA-branded, letters from the comfort of their big leather chairs? :)

Web Design, GNU/Linux and Drupal.

ethank’s picture

I have an Aeron chair actually.

Seriously though, we at WBR just want to release good music and have fans connect to it in any way possible. I love Drupal, have for 6 years and am pushing it hard throughout the company.

I am a hard core music fan. Love it to death.

I just try to make killer technology, support our bands and support their fans.

Dries’s picture

If you look at the high-resolution version of that picture, you can actually spot Druplicon on ethank's screen. :)

And this picture seems to have a stack of Drupal related documents. Did you print out the Drupal handbook?

Thanks for using, supporting and evangelizing Drupal, Ethan/WBR!

george@dynapres.nl’s picture

"Lorem ipsum dolor sit amet": What kind of language is that?! ;)


Interesting write up, BTW.

themegarden.org’s picture

From http://en.wikipedia.org/wiki/Lorem_ipsum :

In publishing and graphic design, lorem ipsum is standard placeholder text used to demonstrate the graphic elements of a document or visual presentation, such as font, typography, and layout. Lorem ipsum also serves as placeholder text in mock-ups of visual design projects before the actual words are inserted into the finished product. When used in this manner, it is often called greeking.

Drupal Themes Live Preview - themegarden.org

george@dynapres.nl’s picture

Missed my wink, did you? Anyway, the place holder text is now gone.

gusaus’s picture

Y'all have really come up with a fun, powerful, yet easy to navigate site. The draggable nodes, changing backgrounds, and artist/genre sliders are very cool - video size/quality (with the grassy background) makes you feel like your at the drive-in. Once thing I found particularly interesting is how the artist (info) pages provide links to MySpace and Wikipedia - YouTube has a place on the main navigation. Maintaining a presence on those sites should be essential for any band or artist.

Always helpful to have such an in-depth writeup (install profile would be 'da bomb) - additional insight into this or any of the Warner/affiliated sites would be a great learning experience over at the Drupal Dojo and/or a great conversation piece at a local Drupal meetup.

Great to see the big labels embrace Drupal (and do it right) - the knowledge/tools will empower the indie artist as well.

Gus Austin
PepperAlley Productions

Gus Austin

Rowanw’s picture

There's some impressive functionality in there, but the overall design feels weak and empty - particularly the individual artist pages and blog posts (needs better typography). Furthermore, the layout is too wide for display at 1024px across.

What's the point of the genre slider? It doesn't appear to help with finding a genre.

Otherwise the site isn't too bad and I'm grateful for the detailed write-up.

themegarden.org’s picture

Very interesting design and nice site.
Also, thanks for this writing.

Question: SuperTeaser ?
The site is driven by drupal 5.1, and SuperTeaser isn't ported to Drupal 5 jet (as I know).
Drupal Themes Live Preview - themegarden.org

ChrisBryant’s picture

The 5.x support has not been added as an official release, but there is a patch that works well. You can download it here:


Gravitek Labs

canen’s picture

Nice write up. Can you explain more on how you get the sub theme to use its own template.php?


malexandria’s picture

Congrats on your new site, very impressive and detailed write up. Unfortunately the design leaves a lot to be desired, it's
too blocky and "busy," kind of hard to tell what's going on.

sarvab’s picture

Getting the sub-theme to use its own template.php basically comes straight from the zen theme; just add this code somewhere in your main theme.php

if (path_to_subtheme()) {
  if (file_exists(path_to_subtheme() .'/template.php')) {
    include_once(path_to_subtheme() .'/template.php');


canen’s picture

Thanks. Knew it would be something simple.

Prodigy’s picture

Congratulations on a job well done! I don't know if I want to know this answer to this question mainly because I know how long it would take me (haha!), but how long did this project take to complete?

Also wanted to say I love the dynamic views module, with a little work this could solve a lot of peoples problems. I think the developer of Views is focused on Drupal 6, so extensions like these are fantastic!

Anyone know how much work would need to go into Dynamically loading "Sorts"?? Not Exposed Filters, but Exposed "Sorts".

Currently, most people are creating more Views to Sort by " Rating" , " Ascending & Descending Date", etc,etc,etc. It seems like we are so close?

sampelo’s picture

it looks amazing.
can you please talk about how long it took, (by task, etc) and how much people had to work on site versus remotely?

ethank’s picture

This site was literally in development for years! Off and on. This iteration was in comp phase for a few months. Actual development I'd say took 2 months total, give or take.

At WBR, we had our former head of new media, creative director, myself, web developer, project manager (shaun) and a few others working on it. Out of WBR we had all the people mentioned in this article.

We typically have 2 to 7 sites in production at any given time. This one took longer because it deviated from our normal wireframes/process (in a good way!)

ethan kaplan
head of technology, warner bros records
100% Drupal/Solaris/PHP/Apache/FUN!

drupalisme’s picture

The layout look not good when using WXGA screen. Too many empty space on the right side.
Also I get this many times:

Warner Bros. Records

There was an error. Please use your back button and try again.

Obama’s picture

Well, ya can't make a site that looks amazing on everyone's screensize, but the errors should be taken care of for sure. I was also impressed by another of Josh Pigford's designed sites.. theused.net. Such a clean style while showing so many different options of things to interact with. For the band's perspective if I were them, I'd be thoroughly impressed having that as my own.

chellman’s picture

[removed - this doesn't happen anymore!]

bmadore’s picture

Terrific write-up. It's inspiring to see Drupal being used at this level. I'm curious about any performance benchmarking info you'd be willing to share. Given all the interest in "enterprise" level Drupal site scalability it would be great to have some statistics from usage of Warner Brothers Site(s) that are powered by Drupal. Any chance you would be willing to share the info about how it is setup on the back end and requests per second benchmarks, that sort of info?

rliebenberg’s picture

Not quite in house, but right down the street from Burbank.

# whois -h whois.arin.net

NetRange: -
Internet Video Gal’s picture

This is really cool, congratulations on a good service

[Suspected spam removed]

Balu Ertl’s picture

Something is not entirely okay with this domain name.

All of them redirects to a fake landing page owned surely not by Warner Bros. Records, Inc. :)

_gramur’s picture

You being sarcastic?

silverwing’s picture

It was down for a while, but appears to be back now.


RobertTristan’s picture

yes its back up now..