Last summer, DTEK was honored to be selected by the World Affairs Council in Seattle, Washington, to re-design and re-develop their existing website using Drupal. The Council's mission is no less than to "link Greater Seattle to the world", via global citizenship programs and foreign exchange, and facilitating visits by world leaders and professionals to Seattle. The Council's old, static website was difficult to maintain, inflexible, visually dated, and did not reflect the Council's dynamism and vibrancy.
We were thrilled to launch the new Drupal website this spring. Andy (arh1) introduced the new site and wrote up the fun and eye-catching front page slidepicker on our blog, so I will cover some of the other aspects of how we built the site using Drupal core, contributed modules, a custom theme and a bit of custom code.
Graphic design and theming was a major focus of the project. We worked closely with Bad Feather, a graphic design shop that we often partner with, to adapt the Council's existing branding and build the site theme. I'll let the theme speak for itself through the included screenshots - and please, visit the site to have a look!
Since the Council organizes, sponsors and promotes many events, the multi-track, filterable Events Calendar was another major feature. The Council also requested simple integration points with Facebook and Twitter - both for content authors and for site visitors. And finally, most content is created by a staff member or intern and approved by an Editor before being published, so we needed to create an editorial workflow, including notifications upon certain content state changes.
Events Calendar
Events are our most complex content type and have many additional CCK fields to accomodate the special case of "sub-events". Registration is handled elsewhere (mostly by the PrestoRegister service), so we just needed to create a flexible event framework and then do the associated theming gymnastics. Notable fields include Speaker, Event Date/Time, Registration Time, Registration Link, Location, and four separate price fields for members, non-members, students and teachers. Events are subject to the publishing workflow, and also integrate with either Facebook or Twitter if desired.
We had fun exceeding expectations with the Events Calendar! Inspired initially by the events calendar at BYU, we set off to create something similar. The base functionality is provided by the Calendar, Date and Views modules. We then added the Better Exposed Filters and BeautyTips modules for the UI enhancements and "eye candy". Event Categories are simply taxonomy terms, with some custom CSS on the filter checkboxes to match the event color coding (from the view).
Social Media
The Council requested simple integration with Facebook and Twitter, for both content authors and site visitors. Since the latter is the simpler case, I'll address it first. The TweetButton module does exactly what it sounds like, and we opted to add a "Tweet" button to Stories, Events and Blogs. The Drupal for Facebook module has many submodules with optional functionality (fb_stream, fb_connect, fb_canvas, etc), but we decided to keep things as simple as possible and just use the main fb.module. Copied from the included fb_example.module (in fb/contrib/), we added the custom hook_link() function below to a custom module. Again, we added a "Like" button to Story, Event and Blog nodes.
/**
* Implements hook_link().
*
* Add an XFBML like button to all node pages. The button will appear next to
* other node links, such as "add new comment".
*/
function wacs_config_link($type, $object, $teaser = FALSE) {
if (module_exists('fb')) {
if ($type == 'node' && in_array($object->type, array('event', 'story', 'blog'))) {
$items = array();
if (variable_get('wacs_fb_link_add_like', TRUE)) { // Switch to control this behavior.
$url = fb_scrub_urls(url('node/' . $object->nid, array('absolute' => TRUE)));
$items['dff_like'] = array(
'title' => "<fb:like layout=\"button_count\" show_faces=\"false\" href={$url}></fb:like>",
'html' => TRUE,
);
}
return $items;
}
}
}
Integration was a bit more difficult for the content authors, mainly because of the Editorial workflow process - meaning content should be announced on FB/Twitter when it moves to the Published state, not when it is originally saved (which is how most Social Media integration modules operate by default). The modules involved are the Twitter and FB modules, along with Workflow and Rules. We added CCK fields to flag content to be pushed out to Twitter and/or Facebook. Then Rules handles the announcements when the content moves to the Published state.
Editorial Workflow
The World Affairs Council has many content authors, including a revolving staff of interns, so we created the following roles on the site: Administrator, Director, Editor and Staff. Administrator users can do most anything on the site, as you might guess. The Director role only has a single permission - "administer permissions" - and will be assigned to the Editors who manage user accounts. Users creating content fall mainly into the roles of Staff or Editor. All content on the site is subject to our custom publishing workflow, and will be in one of three states: Draft, Review or Approved. Using the Workflow and Workflow Access modules, we have granular control over which roles can perform each state change. We also use Rules to fire events when content moves from one state to another.
Users in the Editor role can create and edit any content on the site. They are also allowed to move any content to or from any of the Workflow states above. Staff users can create new content, which they can either save in the Draft state, or set to the Review state, which emails all Editors that there is new content awaiting approval (authors also see an on-screen message here, reminding them of the process). If an Editor approves the content and moves it to the Approved state, the content will be visible on the public site, and the author will get an email letting them know. Similarly, if the content is rejected, an Editor moves it from Review back to Draft, and an email is sent informing the author.
Front page Slidepicker
We created a prominent 'slidepicker' on the site front page as an attractive way to highlight multiple pieces of content in a relatively small area. We chose to use the Views Slideshow module, which leverages the JQuery 'cycle' plugin. Since the module integrates with Views, creating the list of content was a snap. Editors can easily control the content that's featured using a Nodequeue. Theming the slidepicker wasn't too bad either; check out Andy's blog post for all the dirty details.
Dev notes
Without going too deep, here are a few important bits of our development workflow. We built the site using Subversion for version control, but have since migrated to Git (yea!). We rely heavily on exportables to keep site configuration in code and versionable, the indispensable Features, Context and Chaos tools modules being the key. Other configuration changes that aren't straightforward to export are handled via update functions in a custom module. And of course Drush is the Swiss Army Knife tying together our deployment process.
All together, we can accurately create snapshots of the site at any given time, easily rebuild staging and development sites from production, and generally ensure a stable development environment.
Conclusion
The World Affairs Council project was a great fit for Drupal, and we are all proud of the final outcome. The Events Calendar, Social Media integration, Publishing Workflow and home page Slidepicker were all fun and unique challenges. And in each case, the Drupal community was able to greatly increase our ability to confidently deliver a robust set of tools for the Council's content publishers and consumers. We're excited about the platform and what the World Affairs Council community will be able to do with it! "Final outcome" is a bit odd in the sentence above. I think both DTEK and the World Affairs Council see this launch as a new beginning, and we're greatly anticipating the evolution of this publishing platform in the months and years to come.
About DTEK
DTEK is a boutique web development firm based in Seattle, Washington. We provide Internet strategy and development services for non-profit organizations, commercial firms and entrepreneurs working on progressive causes and social justice. We take pride in long-term relationships with our clients, providing ongoing support and maintenance after initial development and website launch.
