Every year, National Geographic Networks previews new and returning shows on their two television channels, National Geographic Channel and Nat Geo WILD, for ad agencies around the world. The ultimate goal is for people from these agencies to get in touch with Nat Geo’s ad sales division to buy ads during the shows for their clients.

Commercial Progression previously worked with the ad sales team on one Drupal site, so when they wanted to combine the functions of that site with another, totally redesign everything, and generally make it bigger and better than ever, they knew where to turn.

So, what’s this thing supposed to do anyways?

The main purpose of the site is to preview shows for potential advertisers, so that means a lot of video clips (and occasionally some static images for good measure). All of the clips have to be categorized by network (currently NGC or WILD but who knows what the future holds). For most of the year, previews are also categorized by the quarter (or quarters) in which the shows will air. Then, around mid-March, things start to get interesting.

Starting around mid-March and running for a couple months is “Upfront”. “Upfront” is when new shows are unveiled and networks make their big pushes to sell ads during their shows. For National Geographic Networks’ ad sales site this means several things”

1. Site traffic surges when they start sending e-blasts to potential advertisers and tends to remain high throughout the upfront season.
2. Previews need to be added to the “Upfront” section of the site which uses an entirely different classification scheme (eg “New Series”, “Returning Series”, “Special”).

Besides the show previews, there are “case study” videos for each network, photo galleries, slideshows, and even a couple simple pages.

So how does it work?

All images and videos are categorized using a single, hierarchical taxonomy vocabulary. Terms are assigned to content using the Hierarchical Select module and content automatically get’s associated with the entire term lineage (eg NGC -> Programming -> 2Q13).

Pages, images, and videos all have their own requirements and thus are all separate content types. Image and Video content is never directly exposed to users so minimal effort was spent styling those content types. Instead, they are presented to users on category pages (eg ngc/programming/2q13) that show a grid of previews for all images & videos in the category. When a user clicks on a preview, the selected item is shown full size above the grid.

Because the 3 major sections of the site (Upfront, Programming, and Case Studies) all follow this same pattern, we were able to use a single view to power all 3 sections for both networks. Taxonomy term names are passed in the url and used as contextual filters to show only the content with the requested term lineage. The first result is placed full-size in the header and replaced via javascript when a preview is clicked. If a user wants to go directly to a video from the menu, the view is passed an additional parameter of the node id (eg ngc/programming/2q13/123) and a custom preprocess function adds that to the header instead of the first result.

Slideshow eh? Sounds simple enough.

For the network homepages, Natgeo wanted slideshows where they could feature videos or linked images. On the surface this sounds really simple: Add a link field to images, setup a view with displays for each different slideshow, setup views slideshow, add the views to the pages and then spend hours trying to style the slideshow & pager so they’re pixel-perfect to the designer’s vision.

But wait, there’s more! What happens when a video is playing? The slideshow shouldn’t automatically transition when something is playing even if they move their mouse away. If they manually change slides, the video needs to stop playing so they don’t have a hidden video playing, especially if they’re trying to play another one.

Pausing the slideshow when a video is playing (and starting it again when the video finishes) is a matter to learning both the javascript api for the video player (jwplayer in this case) and for Views Slideshow. Once that’s done then the “pause” command can be sent to the slideshow when the video starts and the “play” command when it finishes.

So, how do you stop the video when someone manually switches slides? To handle that, you need to edit the slideshow view displays. In the settings for the slideshow format there is a “jQuery Cycle Custom Options” heading. In this case, you need to specify a custom javascript function for the “before” event that will stop all videos in the slideshow (yes, this involves storing javascript in the database and yes, I know this should be avoided if possible).

Free iPads!

The site is finished and tested, the client has signed off, it’s been deployed to production and had a “soft launch”. Everyone is proud of what they’ve done for such a well-known client and ready for something new after months of intense focus on that single project. Then, comes the official launch day and the team at National Geographic send out an e-blast to thousands of people offering them a chance to win a free iPad if they’re one of the first hundred visitors to the site.

Want to find out what happened (spoiler alert: it wasn’t pretty)? Want to find out how we rapidly designed and implemented a cloud-based hosting solution? All of that and more will be covered in an upcoming post.