SonyBMG Launches MyPlay on Drupal

Myplay.com is a redesign and re-branding of Sony's Musicbox site which showcases SonyBMG's artists, providing free access to their videos, music and photos. Users can create lists of their favorite artists as well as review their music and embed widgets of their favorite artist's content into other sites. Sony Musicbox was originally implemented by the Lullabots who provided the base framework for this redesign. Thanks to their diligence and teaching as well as excellent tools provided by Earl Miles (Panels 2, Views and Nodequeue), three people (Suzi Arnold, Jerad Bitner and David Burns) were able to accomplish this task in just over a month.

This case study documents how the site is put together, and provides implementation details on how we've combined numerous important contributed modules to build a "next generation" Drupal site.

Overview

Here's a deconstruction of the home page to illustrate how we're using modules such as Views and NodeQueue to build dynamic pages that our content editors have full control over. More detailed information about implementation follows.

Each landing page is a Panel, with several Views and Blocks to pull in content from other sections. Panels allows content editors to make changes on-the-fly about how the landing pages should be structured, what content should be placed on the page, and where.

In places where artists or videos are featured, a NodeQueue is used so that content editors have precise control over the order in which the featured content is placed, and can selectively choose which is the most prominent in the page.

Two pieces of custom functionality are used to build this page: the first is the custom content type from which we're pulling the Flash animation. The second is an AJAX callback added to the artist View listing. The rest of this page is just creative theming of the output provided by Views, Panels, NodeQueue, and the Drupal block system.

Content Types

Since the site is based upon our Artists, these are essentially the "master" node types, in that the Album, Video, and Photo content types contain a node reference CCK field to the Artist of which they are an asset. The Album content type then has an asset of Track, creating an hierarchy as follows:

Artist

Album

Track

Video
Photo

Considering that there is this relationship between content types, a custom navigation module was created during the inception of Musicbox to not only keep track of translating the titles of these nodes into clean titles for urls (i.e. Foo Fighters becomes foo-fighters) but also, just in case someone tries to use a path of say: /artist/foofighters, they would be redirected to /artists/foo-fighters AND would keep track of its parent when it came to urls for artist assets. So Albums keep track of the fact that they have an Artist node as a parent, and Tracks are aware that their parent is an Album. This makes it easy to find the relationship of a particular node with a simple query.

Nodequeues

Nodequeues give our content administrators the ability to control what goes where. For example, by allowing our admins to create a list of the albums that they want to highlight this week, we can take this nodequeue and display it through a view to show on the front page as well as use it to generate an xml feed for the flash widget on the Videos page.

Initially we had just two nodequeues that defined our top artists, and then automated what assets were displayed by this list, but there was a need for more fine grained control of what content was shown on main pages (/artists, /videos, etc.) and more nodequeues were added to give them this control. Nodequeues are great for this purpose and allows content admins to have a uniform UI for adding, removing and sorting highlighted content.

Panels

With the new beta release of Panels 2, we were able to effectively cut the amount of panels in our list by almost 66%. This is due to the Context feature that Earl implemented. Context is a bit complex to grasp at first, but the simplest example I can give is the Argument Context. Let's deconstruct the Video Panel and you'll see what I mean.

The path for the Video Panel is simply /videos. In the Context Tab of this panel, we then add an argument for Node Title. The Node Title argument is a custom argument panel-plugin that I implemented by using the custom module mentioned above (myplay_navigation) that does our clean node title translation. But this panel-plugin is very similar to the Node ID argument that comes with Panels 2. So suffice it to say that instead of giving the panel a Node ID as an argument, I can give it a Node Title instead. ANYway... for each argument given, a new context is created. But that's not all. A new Display is also created. These displays can have a completely separate Layout and completely separate Content within those layouts. So the hierarchy here is as follows:

Panel
- No Argument
- Argument 1 - Artist Node Title
- Argument 2 - Video Node Title

Theming Panels and Views

We chose to use the 'flexible' layout for all of the panels on MyPlay. Flexible allows the admin to set exact width units (%, em or px) in the layout settings for the total page as well as individual columns. Pixel-based column widths were essential for the new design, specifically for browser compatibility as safari tends to read % and em differently than other browsers. This is another big advantage of Panels 2 as Panels 1 is all percentage-based.
Virtually every view we use has a custom theme function that allows us to recycle the view but change look and feel based on where/how the view is being called. We also account for this in the node tpl files as needed. Examples follow:

http://myplay.com/artists/britney-spears
andhttp://myplay.com/music/britney-spears

use the same standard linked image/linked title list view for the music block:

In our theme function (in template.php) for "function mytheme_views_view_list_myview($view, $nodes, $type) {"
we break up the $output displays via:

// artist nodepanel needs only 1 image if (arg(0) == 'artists' && !is_null(arg(1)) && is_null(arg(2))) {   (make look this way) } elseif (arg(0) == 'music' && !is_null(arg(1)) && !is_null(arg(2))) {   (make look that way) }

Another handy trick is sniffing for views in the node.tpl file via:

<?php  global $current_view; ?> <?php if ($current_view->name == 'some_view' || $current_view->name == 'another_view'): ?>     (whatever you want here) <?php elseif ($teaser): ?>     (format the teaser) <?php else: ?>     (full node view)
Pane-specific node templates

Panels 2 has tools for very fine-grained theming control. Using our example above of Argument 2 - Video Node Title, there is a unique node tpl file for the video content type when called via this panel. Steps for using this method (in Drupal v 5.x) are as follows.

In the panel/content tab for Node Name 2 Video - node content pane we have the Identifier set as:

Next, in your template.php file, specifically the section for _phptemplate_variables - $hook == 'node', add the following code:

<?php   if (!empty($vars['node']->panel_identifier)) {     $vars['template_files'][] = 'node-'.$vars['node']->panel_identifier;   } ?>
...note that if your template.php file does not have a section for this check the Zen theme for examples to copy.

Finally, create your node tpl file. In our case this file is named: node-video_node_pane.tpl.php
This can be themed as any other node tpl file.

Questions/Comments?

We welcome your feedback! :)

Original Article:

SonyBMG Launches MyPlay on Drupal