Bond Lifestyle

The 2nd most visited Bond website in the world - Bond Lifestyle.

Why Drupal was chosen: 

Migrating from a raw HTML site, which had to be updated manually, Drupal 7 offers high-end publishing tools to quickly add content to the Bond Lifestyle website. Building the original site took months of manual labour over the course of several years, but the content migration (from HTML to Drupal) of over 1,000 articles took only two weeks. Using a set of different content types, which can be related to each other and extended with ‘fields’, it greatly reduces the time required to publish an article. Add new content can now be done in a matter of minutes, including writing the article.

The Bond Lifestyle website was founded in October 2005 by Remmert van Braam, in order to make an informational website about the products and brands that are used by the fictional character James Bond in movies and books. In 2012 the website succesfully migrated from an HTML site to Drupal 7. And recently the new Drupal-powered Bond Lifestyle website was featured in a live interview with CNN’s Jim Clancy, who called the site “the second most visited Bond website… in the whole world”.

Describe the project (goals, requirements and outcome): 

Before we started there was a clear direction to go. Here I’d like to discuss some of the development requirements.

Frontpage

The frontpage should be an eyecatcher, preferably like a real online magazine. It includes a Views Slideshow (showing slides from a custom ‘Featured’ content type); a Views generated list of recent news; a Views generated list of last 20+ article titles sorted by date; several widgets such as the latest Video podcast (using the Media module to work with YouTube videos). The views module further came in handy for latest comments, featured products (sorted by Nodequeue hierarchy) and several menu blocks to form a sitemap.

Product Overview Page

A product overview page, is a Taxonomy Term page for a specific category within the ‘Products’ vocabulary. For example ‘Bond Girls’ or ‘Villains’. Using the Panels module and Views content panes we could render teaser lists of content (formatted by Display Suite) for specific categories. The ordering of products was important, it should not be by date or alphabetical, but by manual sorting. Explicit manual sorting of content is doable in Drupal by using the Nodequeue module. End users can easily drag and drop content in their preferred order.

Product Detail Page

The individual product detail page shows the Drupal node and all its fieldable content. The end user can create new content by submitting a content type-specific form with relevant content fields. Using the Display Suite module these fields could be organized flexibly, showing links, ratings (Voting API), comments, share buttons, images (multiple), optional featured image, ability to add video (Media module), a list of Related Content (manually added through the Entity Reference module).

The use of ‘Tags’ (Taxonomy Terms)

To organize content throughout the site, we use ‘Tags’. Tags are a vocabulary in the Drupal Taxonomy Term system. We can use it to tag content with our own custom labels, such as ‘Sean Connery’ or ‘Gadget’. This helps to generate automatic lists of related content when you are viewing age page. Besides all-purpose Tags, we also use vocabularies for ‘Bond Films’ and ‘Bond Actors’.

Content Overview Pages

Besides Product overviews, there are also other content types: News, Podcasts (Videos), Articles (editorials) and Events. Each gets its own overview page and lists of related content. Each can have custom display through Display Suite, Panels and Views.

Modules/Themes/Distributions
Key modules/theme/distribution used: 
Why these modules/theme/distribution were chosen: 

In order to arrange content into different categories and site sections Bond Lifestyle uses a mix of both Display Suite, Panels and Views.

Display Suite is used to control the layout of individual articles (their fields and their output formatting). But Display Suite can do more, such as attach Views-generated Blocks of additional related content. Each content type has its own layout requirements.

Panels is used to create several ‘pages’ or main sections of the site such as News and Articles. A good example of a Panel Page is the Bond Lifestyle homepage, which has many different blocks and content organized into a magazine style frontpage. Just for clarity – we use Display Suite only to organize individual article layouts (teasers and full page views), but we use Panels to organize groups of content (Blocks, Views Content Panes, etc.) on a page.

Nodequeue is an important part of the system. Instead of organizing content alphabetically or by date we needed a solution to manually arrange content. Nodequeue is an excellent solution and it comes with a ‘Smartqueue Taxonomy’ extension to order the same piece of content within different taxonomy categories, allowing for fullest flexibility.

The Drupal vBulletin integration works well to establish a single sign-on between Drupal and the vBulletin discussion board. It works both ways. Users can register from either end and find themselves logged in to both systems.

Several other tools we could not do without are the Media, Wysiwyg and reCaptcha modules. These help to manage comments and write up articles with media.

Our theme is custom designed, but built on the original Bartik theme for Drupal 7. Of course we added our own regions and worked with the Drupal “template hints” to do some custom magic. (I have built dozens of Drupal themes and all of them are basically derivatives of the original Bartik theme – it is incredibly adaptable.)

Display Suite configuration and template hints

The site uses 4 sets of custom ‘Dispaly Suite Layouts’: Articles, Events, News and Products. Although Display Suite is designed to be very flexible even without template hints (custom template overrides in your theme folder), we needed to have more flexibility. In our theme folder a subfolder resides called ‘ds_layouts’ where we store Display Suite layouts, which can be configured on Drupal’s Content Type > Manage Display pages for each content types. Our DS layouts thus match 4 content types in Drupal (Articles, etc.).

A custom Display Suite layout set consists of a CSS file (usually small and only describes layout), an .inc file with code settings and the .tpl.php file (the actual template) containing PHP code to display fields and regions.

Use of the Panels module

The Panels module allows to create separate ‘pages’ with custom layouts. Such a page is different from a ‘node’ (Drupal’s content), because it can contain multiple lists of nodes. So we use Panels page to display content on them. We have two basic Panels pages:

  1. Frontpage
  2. Taxonomy term pages

1. The Frontpage Panel

The frontpage has a complex custom layout. In our theme folder there is a subfolder ‘layout’ which contains a custom ‘twocol_home’ layout set. It function similar to a Display Suite template as explained above. Using a .tpl.php file we can describe a layout that is specific to the homepage. Why not use Drupal’s theme regions? Well, there is a theming hierarchy between themes, panels pages and display suite layouts.

  • Themes describe the semi-fixed skeleton of your whole website;
  • Panels pages can theme the content region with more elaborate layouts for specific pages; within themes
  • Display Suite layouts describe layouts of individual pieces of content within pages within themes.

Using all three combined gives a granular flexibility to theming Drupal sites, from the global framework down to individual content.

2. The Taxonomy Term Pages

Panels allows you to set conditional content based on URL path or other system variables. For the taxonomy term pages we created conditions for different vocabularies. For example, the vocabulary ‘Gift Ideas’ shows different content than the vocabulary we use for ‘Products’. Using Panels, we show different Views ‘content panes’ based on set conditions. Panels’ variables are available to these Views content panes, so you can create custom queries based on the conditions set in the Panel.

Team members: 
Project team: 

- Rem-art (www.rem-art.com)
Remmert van Braam is the owner and author of Bond Lifestyle. His design studio Rem-art designed the website graphics and he authored the content.

- Morningtime Digital Media (www.morningtime.com)
Mathijs Koenraadt is the project lead and the developer who built the Drupal 7 website, the theme, migrated the database content and is responsible for the site structure so Rem-art could pick up the tools and fill in the content.

The website is hosted on a single GoDaddy dedicated server.

Events overview for Bond Lifestyle
Video section for Bond Lifestyle

Featured

Comments are closed.