The home page of

At the end of 2007, Aten Design Group worked with The Colonial Williamsburg Foundation to deploy, a Drupal website about Citizenship. The following case study documents some of the factors that led to choosing Drupal, and outlines the technical approach for the project.

The Colonial Williamsburg Foundation operates the world's largest living history museum in Williamsburg, Virginia. The foundation preserves and interprets a 301-acre Historic Area; operates museums, outreach programs, and the John D. Rockefeller Library; and carries out important research and archaeology pertaining to the origins of America. In accordance with its mission, "That the Future May Learn from the Past", the foundation is concerned not only with recreating the 18th-century experience, but with facilitating education about the idea of America–both in its beginnings, and in its relevance for the future., a website that promotes discussion around the topic of Citizenship, is a fitting extension of this core mission.

Why Drupal was chosen: 

There were snags early in the prototyping process. The community building software being used didn't support heterogeneous categorization. We wanted two taxonomies for the same content: one for five discussion topics that would serve as site-wide containers, and another for free tagging. Additionally, we saw issues on the horizon with creating page content that would be separate from the blog, structured under a hierarchical menu, but capable of being categorized just like a blog post. In the technical setting at that time, these features were simply unavailable–at least without extensive custom development.

The problems we were up against essentially boiled down to categorization–something Drupal excels at. Beyond categorization, Drupal's community features, configurable content-types, access control, flexible menus, and RSS publishing were attractive. Additionally, content management "at large" was a subject we often visited in our work with Colonial Williamsburg, and had just as often abandoned due to issues of cost, licensing, and interoperability within an already massive web architecture. As a fairly isolated piece within their broad spectrum of web deployments, would be an ideal test-case for the Drupal framework.

Describe the project (goals, requirements and outcome): 

By the time of Aten Design Group's involvement with the project in late 2007, work had already started. Designs had been produced. A website had been custom-coded in ColdFusion. Community features had been implemented using a .NET-based social software solution. The concept had already gone through several major evolutions, and its stakeholders felt that the latest iteration still wasn't quite spot-on.

We began our work with a collaborative discovery process to reassess the primary goals for the website and identify the best steps forward. The central purpose of the project, as defined during this process, would be to engage users with a discussion around the idea of Citizenship. In line with this goal, we established the following requirements:

  • Use blogs, organized by themes and tags, as the primary means of engaging users.
  • Leverage video as a prominent means for delivering content, in blog posts and elsewhere in the website.
  • Offer forums as a platform for supplemental discussion.
  • Provide in-depth resource materials, including translations for some documents, with background information on the subject of Citizenship.

Windows Hosting

Colonial Williamsburg runs IIS on Windows NT servers, uses ColdFusion for development, and serves up data with Microsoft SQL Server. It was an uncommon environment for Drupal. Time constraints and a pre-existing service agreement for a dedicated NT server made considering LAMP unrealistic, so we began exploring the viability of hosting Drupal on Windows in a production environment. We installed PHP 5, MySQL, and an IIS module (ISAPI Rewrite) to provide mod_rewrite-like URL rewriting for clean URLs.


With server configuration mostly behind us, we began building out the website.

Content Types and Teaser Lists

We implemented content types using the CCK, and created custom PHP blocks to handle content lists. We went back and forth a bit on whether to do this with views or custom queries, but in the end sided with the latter–our decision aided by the fact that lists would need little-to-no editing, and did not depend on joins with CCK fields.

Additionally, each "Discussion Topic" category within the website has a correlating Discussion Topic node, assigned to its respective category, which serves as a stub for listing related posts. This approach provides workflow controls for categories that are already available for nodes. New topics won't actually appear in the website until the appropriate user publishes the correlating Discussion Topic node.

Throughout the website, custom blocks inspect the current page, determine the current Discussion Topic, and display lists of related content.

Site-wide Call-outs

The client needed a way to call-out any content from within the website in the form of graphic promotions assigned to the right-hand sidebar. This was accomplished by creating a custom block that displays images attached to any content in the website via a CCK imagefield labeled "callout".


Originally, content was entered and edited with the help of TinyMCE. We later swapped TinyMCE for Markdown, plagued with the same old problems presented with JavaScript-based attempts at WYSIWYG. (Read more about our thoughts on WYSIWYG vs Markdown.)


CAPTCHA was used for all input fields available to unauthenticated users. We chose Math CAPTCHA, rather than image-based CAPTCHA, for accessibility reasons.


Multiple translations of citizenship resources were accommodated via a custom content type (Page Translations) equipped with a Node Reference field for linking to original texts. Each translation features an overview "about" page that provides a description of the content and goals within, as well as a list of all additional resources available within the website in that specific language. Because the implementation uses a custom content type with a CCK node-relate field, dynamically generating these lists, and linking each translation page back to its respective source, was relatively simple.

Throughout the website, translations are represented visually as a series of flags beneath the title of any document where additional translations are available. In the site-wide footer, these same flags each link to an overview "about" page for the respective translation.

Video Content

Some of the most interesting functionality at involves its handling of video content. Early in the project, we simply allowed content contributors to paste embed code from YouTube, Vimeo, Blip and similar websites into the body field of blog posts. Later, we began discussing a way of aggregating posts that contain video into a single, self-contained video library. Additionally, video editors at Colonial Williamsburg wanted the ability to more closely control the quality of videos being published, which in this case meant hosting the video locally. We wanted to maintain the ability to syndicate video to third-party video websites, but wanted to better manage the quality of original videos posted within

These new requirements pushed additional development in two directions. First, we needed a way to list video posts together in a library-like setting. Second, we needed to dynamically push videos out to services like YouTube.

Video Library

To accomplish the first requirement, we created a simple module called VideoLib that provides a configurable view for displaying video content, relevant taxonomies, and related videos within a single view-port. The module exposes several theme functions that offer in-depth control over the look and feel of the video library. It includes JavaScript that applies unobtrusive AJAX actions to the taxonomy and related video navigation, providing a highly responsive, single-page experience for users.

Video is attached to content via a CCK file-field labeled "video". Any content type can behave as video content simply by adding the "video" field to it. Within the settings page for VideoLib, admin users can specify which content types that have the "video" field should be included in the video library. Additionally, administrators can choose which taxonomies to expose as navigation blocks. In this case, we wanted Discussion Topics to appear as navigation options down the left side of the page, but not Tags.

It is worth noting that we could have used a combination of page and block views to accomplish a similar end result. We opted instead to create a custom module that rolls all of the necessary functionality into a single, more portable, centrally managed feature for this website, with potential application for future projects as well.

Link Rewriting

Stepping back a moment to the video library functionality, it is worth going into a bit of detail about the way we handled linking. Within the video library itself, all links are routed to URLs that appear as "videolib/{term id}/{node id}", a menu path controlled by the VideoLib module, which in turn handles all of the necessary functionality for displaying videos. We wanted to go beyond this, and make sure that any node within the video library could be displayed outside the library as well (in teaser lists, for example). To accomplish this, we used the custom_url_rewrite system hook function in settings.php. Within that function, we detect if the "node/{node id}" path belongs to a video post. If it does, we dynamically rewrite the URL to "videolib/{term id}/{node id}".

Wrapping Up, Moving Forward

Drupal's robust taxonomy features, combined with its powerful content management capabilities that, while excelling at community features, provide more than a social-software solution, made it an excellent choice for the iCitizenForum project. The initial Drupal-powered deployment launched just eight weeks after redesign efforts began, largely due to the wide range of features already available in core and contributed modules–without the need for extensive custom development. Since launch in early 2008, numerous new features and modifications have been incorporated back into the website. Moving forward, the vision for is that it continues to evolve and adapt. Drupal, with its modular architecture, support for open standards, and passionate community, continues to be an ideal platform for the project.

Organizations involved: 
Key modules/theme/distribution used: 
Why these modules/theme/distribution were chosen: 

The Youtube API module was developed for the project.

Community contributions: 

The development effort for the video syndication capabilities, spearheaded by Brad Bowman, quickly evolved into a full-fledged YouTube API module that offers a wide range of interface capabilities that go far beyond the initial needs for simple content syndication. The YouTube API module provides functions for programmatic video management, FeedAPI integration, video feeds, commenting, authentication, rating, and managing favorites between Drupal websites and YouTube.

In addition to automatically pushing content to YouTube and Vimeo, the video library features a video-specific RSS feed that includes all nodes from within the library, their teasers, and their associated videos.

Project team: 

Aten Design Group

Team members: 
The video library shown makes heavy use of Youtube API


PeteMcNally’s picture

Wow, I'm totally impressed by this. I had no idea that Drupal was capable of handling a website like that. Congrats!