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 successfully 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".

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 labor 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, it greatly reduces the time required to publish an article. Adding new content can now be done in a matter of minutes.

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; the ordering 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. Editors 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 a 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.

Technical specifications

Why these modules/theme/distribution were chosen: 

In order to arrange content into different categories and site sections Bond Lifestyle uses a mix of 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 Panels 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 multimedia content.

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 'Display 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 type. Our DS layouts thus match our four content types.

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 you 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 a 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 functions 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 a combination of all three provides for greater granularity and flexibility for 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.

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
Sectors: 
Blogging
Community
Entertainment

Comments

parasolx’s picture

1. nice design... ash grey color combo make site look so professional and "bond"
2. cool content management
3. simplicity

https://www.drupalnote.my (Drupal tutorial in Malay)
http://parasolx.net (my personal blog; Drupal)

heyyo’s picture

I like the possibility to use regular Drupal comments and also to be able to publish them on Facebook.
How did you achieve that feature ?

Anonymous’s picture

Hi, for the commenting we use Fbconnect_stream_publish module, part of Fbconnect. I used custom theming to simplify their default layout.

adrianmak’s picture

how did you build the sidebar menu ?
A taxonomy menu generated automatically?

Anonymous’s picture

Hi, they are mostly taxonomy terms indeed, but the menu is built manually. In our case the terms don't change very often, so we could just build it manually once. Not all links are taxonomy, others are pages, views etc.

erata’s picture

it is a good looking website.

can i ask a question about image link(top of page)?

i like images link (top of page) but how can do that in bartik?
is there a block or content type for this image link or so?

what can i do if i want to do this?

thanks for post from now.

Anonymous’s picture

It's just a custom block in a custom region.

erata’s picture

@morningtime

thank you for post.
i am new drupal, just studying three-four mounths, and i see drupal is a world.
maybe the answer is basic for many people but it is important to me.

so thank you again for your post.

Sydo’s picture

Pretty design!

Can someone tell me how the summary above the teasers has been made?
(so click a menu-item and then see image and text above all teasers).

shamio’s picture

The main content which is placed in the center of home page is a little narrow and in my opinion, its better that you make it more width. Also there are more than 50 links in the footer of website like accessories, vehicles and etc. I think its not search engine friendly and also not suitable for your visitors. Its better to organize them.