Warner Brothers Records rockin’ it with Drupal!

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 Alian Design. 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

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

Blog
CCK (and a few cck field types)
Views (plus few additional views modules)
Image
Imagecache
Send
Pathauto
Service Links
SuperTeaser
TinyMCE
Token
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.

Theme:

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

Flvplayer

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.

Conclusion

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. :-)