TckTckTck is a GCCA campaign calling for a new fair, strong, binding, and international climate change treaty. The Global Campaign for Climate Action recently formed to build a global groundswell for a strong climate deal in Copenhagen this December. GCCA is a collaboration of International NGOs inspired by the success of the Make Poverty History campaign. GCCA's brand is TckTckTck, to indicate that "time is running out" and the web is at the core of GCCA's strategy.

With over 50 diverse and established NGO partners driving the bus, their own unique mandate as a central unifying force, GCCA had to balance two competing yet interconnected elements. First, supporting partners, ensuring they fill a unique role; adding value and always supporting, not competing with partner interests. Second, direct public engagement: providing a strong, unifying global center-point for media and world leaders; organizing new supporters who aren't reached by an existing NGO partner, and supporting new partners who have low online organizing engagement capacity.

The partner organizations are all running their own independent campaigns but using the TckTckTck brand, pointing to the website, and together, in less than a week, they aggregated nearly 1,000,000 supporters to the cause!

Advomatic built the TckTckTck site with Drupal 6 and several staple contributed modules. In general, we used CCK to build the content, Views to list the content, and Panels to arrange the lists on a page. For instance, the home page is a panel page with several Views blocks pulling in content.

Content types

There are three main content types for the site: Stories, Partners, and Events. These are pulled in various lists using Views to fill out the content as needed.

All content on the site have a required Image Field, which is used for the images of various sizes seen throughout the site (using the ImageCache module) when needed.

Stories & Events

As with most sites, Stories are the equivalent of articles, blog posts, etc. In this specific case, each story is grouped by its 'Story Type' vocabulary, such as 'Campaign Updates', 'Human Interest', or 'Climate News'. Nearly all the views accessing Stories are filtered by (or use arguments for) their taxonomy term. In addition to the required 'Image' field, Stories may optionally also be associated with a specific Partner, using a nodereference.

Events are similar to Stories in this case, with added fields for a Date and Location. They appear in their own section, and are also pulled into several Flash pieces, as described later.

Partners

TckTckTck has signed up about 50 partners (and counting), who are other organizations committed to awareness, education, and action regarding Climate Change and the Environment. Each Partner is given a User account, allowing them to directly enter Stories, Partner Campaigns, and Partner Actions (two additional minor content types) into the site. Each Partner account also has a node of the type 'Partner', which is associated with the account using the Content Profile module.

TckTckTck Partner Campaign listing (Greenpeace)

Thus, if a user of the site goes to the partner's user profile page, such as Greenpeace, they'll actually see the content displayed from the associated Partner node, which includes images, logos, and videos. Additionally, a view was created to list all Partner Campaigns (another node type that is basically a link and an image to an external site) associated with the Partner.

Several flash files on the site pull in partner content using XML files. We used the Views Datasource module to do the heavy lifting, and modified the View theme to format the XML data in the fashion expected by Flash.

Flash

Various Flash elements on the site were developed by Biro Creative. Using Views Datasource, we were able to create XML and JSON files as needed to send data to the Flash files. For instance, the Major Moments Flash piece displayed prominently on the left of the Home page is populated with data from events/xml, a listing of Events built with Views + Views Datasource.

Widgets

Another important piece of development was allowing partners to create 'Widgets' that could be embedded on their own sites, which would allow remote user sign-ups and tallying of 'Pledges' by individual people. This was further integrated with Bronto for e-mail blasts. Each partner can control some elements of the display of their individual widget, such as the size, background colors and some copy.

Taxonomy

TckTckTck Taxonomy (Campaign Updates)

We wanted to override the core Taxonomy listing pages with Panels and Views, and ensure the links pointed to the overridden pages, such as TckTckTck Campaign Stories. To accomplish this, we wrote a little custom module, tck_taxonomy, which implemented hook_term_path, and worked roughly like the following. Note that we had originally considered using the Taxonomy Redirect module, but in addition to it seeming a bit heavy-handed for our purposes, we actually ended up needing to override the pages for some specific terms, not shown in the code snippet below, which is not supported by that module.

  /**
  *  Implementation of hook_term_path().
  *
  *  Ensure that Story Type terms point to the stories view rather than the
  *  default taxonomy term page listing.
  */
  function tck_taxonomy_term_path($term) {
    if ($term->vid == variable_get('tck_taxonomy_story_type', 3)) {
      return 'stories/'. str_replace(' ', '-', strtolower($term->name));
    }
  }

For that to work, we also needed to let the core Taxonomy module know that we wanted to override the path. That happened like this (in tck_taxonomy.install):

  /**
   * Implementation of hook_install().
   */
  function tck_taxonomy_install() {
    $ret = array();
    // Set the Story Type vocabulary to use this module for paths.
    $ret[] = db_query("UPDATE {vocabulary} SET module='tck_taxonomy' WHERE vid=3");
    return $ret;
  }

We used the same module to also place specific Stories in a menu tree related to their taxonomy. It was more compact (and easy enough) to do it this way than using the Taxonomy Menu module. Additionally, for some content types, such as Stories, we wanted the menu to reflect the taxonomy, while others, such as Partners, needed to be placed in another tree using a view unrelated to taxonomy. We chose to handle it all with an easy-to-manage function in the custom module rather than using a hodge-podge of methods for altering a menu tree by node type.

Workflow and Flags

TckTckTck Workflow

The Workflow module was set up to create certain states, such as "Draft", "Pending", "Published", and "Archived". To assist with control of the editorial workflow, we used the Rules module, in conjunction with several Flags (using the Flag module). When a story is first created, it is unpublished. A page created with Views, shown here, which is visible only to users with the proper role, lists all stories and events, and allows the editors to sort and filter the view based on certain criteria, such as by Story Type (a taxonomy vocabulary) or whether it's been published.

The view also displays links to flag the content, clicking on which will also publish or unpublish the content. Conversely, using Rules (as shown below), publishing the content will also set the flag.

TckTckTck Rules

Tertiary Menu

TckTckTck Tertiary Menu

One of the unique needs for this site was to display a Tertiary menu. Drupal core can display a single level of depth for the Primary Links menu, effectively creating a Secondary menu which is dynamically created from the menu tree accordingly to a page's placement in the hierarchy. For this site, we needed to display the menu for two or three levels deep. Additionally, according to the site map, a new 'Floating' menu needed to be created, which could also display items in the spot otherwise reserved for the Tertiary menu.

This required the creation of a custom module, which created a block to display the second and third levels of depth of a menu in the case of a page appearing in the Primary Links menu, and the first and second levels of depth of a menu if the page appeared in the new 'Floating menu'.

Development of this menu required digging deep into Drupal's menu API, exposing some weaknesses (some of which have been fixed for Drupal 7), and requiring a rewrite of a core function included with the module to handle both the display of the proper depth and expanded links when necessary.

Views

As usual, the Views module did most of the heavy lifting for the site. Some complex queries were easily created, allowing us to, for instance, grab the top five nodes from a specific taxonomy term, extracting the term from a path argument, and sorting by a flag time stamp.

For those interested, there was a lengthy discussion within the team about the pros and cons of using Nodequeue versus Flag for featuring content. In the end there seemed to be nothing offered by either module that couldn't be achieved with the other, with the possible exception of being able to list archived featured content (which Nodequeue can't do, but wasn't needed on this site), and the easy editorial practice of changing node weights (which Flag can't do without some customization using the Flag Weights module). In the end, we chose Flag, since it had already been set up that way, and could easily handle the required Subqueues of featured content per taxonomy term, though it was pointed out later by other members on the team that Nodequeue Subqueues can also handle that.

Panels

TckTckTck Panels

We used Panels 3 to place various view listing blocks on pages. Using contexts based on the path, passed to the relevant views, this allows the construction of quite complex layouts in a fraction of the time to write a series of queries and creating custom page templates.

For instance, the Story Type taxonomy term link redirects to a panel page that passes the path argument to three distinct views which list content in various formats: a top 'Featured Story' with a large image and teaser, the next four 'Recent Stories', with smaller images and teasers, and then a paginated list of five 'Archived Stories', consisting of a tiny thumbnail and title. The panel contexts also offset the view count, so that the first five nodes are skipped in the last view block.

Internationalization

TckTckTck Internationalization

From the beginning, the structure was set up to allow for internationalization and translation of content. The site needed to be available not only in English, but also in Spanish, Portuguese, Japanese, French, and Chinese. To achieve this, we enabled the Internationalization (i18n) module, and set up the required languages with the core Locale module. We also ensured that the node types allowed translation, and that each view was filtered on language, which allows for each view to pull in content for its own language. To help the editors, we installed the Localization Client module, which allows translating static text elements virtually inline. At the time of this writing, the editors were still translating the site, so the translated sections may not be visible to the general public yet.

Media

TckTckTck Vertical Tabs

To assist editors administering content on the site, we installed the Vertical Tabs module (now part of core Drupal 7), and logically grouped fields within nodes as specific tabs, such as for Media, as shown here.

Embedded Media Field provided the ability to easily add and list videos, from YouTube and Vimeo in this case. We added a Video field to several content types, so that editors could simply paste the URL from YouTube, and Views created a listing of all videos, regardless of the node type. On the listing page at http://tcktcktck.org/video, which is again a panel page, the first view block displays a large thumbnail for the most recently flagged content with a video, and listings of more videos appear below. In all of these, we used Lightbox2 to display the video in a modal popup. (Note that the module also works natively with Thickbox and Shadowbox).

TckTckTck Video Player

Wrap-up

There were many other features built into the site, far too numerous to detail in the short space allotted for this case study. For instance, we installed the WYSIWYG module, configured with FckEditor, we created custom Events listing views to display the events happening 'This Week', and there was work done towards creating a Mobile-friendly theme and internationalization. Finally, the whole thing was tweaked for performance, using a CDN, mod_rewrite, and the Boost module.

On Advomatic's team were Aaron Winborn (aaron), who created the views, panels, and some custom development; Dave Hansen-Lange (dalin), who handled the widgets, performance, and other custom development; and Amanda Luker (mndonx) and Jack Haas (jerseycheese), who themed the site. Dylan Clear (dclear) managed the project.

Advomatic is just one of the many companies behind the success of TckTckTck.org. Communicopia did the strategy and project management. Biro Creative's team produced the beautiful designs and flash animations. Capulet Communications developed and executed the social media strategy, much of which is to credit for the over 1 million pledges in the first week. Nitobi developed the mobile smartphone application. Last but not least, Hoggan and Associates is behind the blogging strategy. Advomatic succeeds both on its own and working with international teams and experts like we did on TckTckTck.

(Cross-posted at Advomatic.com)

Comments

TUc’s picture

What modules did you use to produce the widgets that partners can embed on their own website?

TUc

aaron’s picture

We ended up writing a custom module for this, because of the specific and unique needs of the site. We did, however, consider using the Embed Widgets module, which I would still recommend as a solution in many cases.

asd123asd5’s picture

very impressive design

Advomatic’s picture

Was Biro Creative's doing. They do great work.

http://www.birocreative.com/

ericgundersen’s picture

Awesome work on the site Aaron and the Advomatic team!

@folks that don't know of Biro Creative, you will soon. They are brilliant, the kind of guys that always want to push it.

robpurdie’s picture

And Biro do rule. Thanks, Aaron :)

Steven Mansour’s picture

Another + on the design, content and UI are very well put-together too.

One question regarding i18n - I noticed that the language links at the top of the page do not link back to their equivalents in their own language, but always back to a scale-downed version of the front page / about page in the requested language. Is this desired behavior, or due to the non-English versions of the site not being ready and/or identical to the English version?

aaron’s picture

It is because the non-English versions of the site are not yet ready -- hopefully as the editors catch up we'll be able to switch out that menu to the standard language menu to the proper pages rather than the front. :D

Aaron

animeh’s picture

What module did you use for that functionality?

aaron’s picture

A series of modules, actually. Firstly, Locale is built into Drupal, and does the heavy lifting. Internationalization offers node translation and other features, including several included modules. We also installed several other related modules, which you can see from the Internationalization project page, including Localization client, Translation table, and Menu translation.

saltcod’s picture

Didn't use Admin theme? Or built your own?

aaron’s picture

We used the RootCandy theme for the administration/editor back-end. We also have Administration Menu enabled.

vertazzar’s picture

what hosting are you using?

Advomatic’s picture

We do managed drupal hosting as well as development.

Cheers.

vertazzar’s picture

Nice, I visited websites in your comment signature. I really like your work, thanks for info btw!

daveslc’s picture

It sounds like you needed to create a custom module for the vertical menu on the right.

I am interested in how you created the second level of the horizontal menu (e.g. on the home page, you have People: The Time is now - For a better world - I am ready - do more). Was this part of the custom module, or is there a module around that will do this?

thanks
Dave

aaron’s picture

@davescl: The secondary menu bar you refer to is actually available with Drupal core. We simply created the hierarchy we needed in the 'Primary Links' menu, then set it as the source for the Secondary menu at /admin/build/menu/settings. From that page: "Select what should be displayed as the secondary links. You can choose the same menu for secondary links as for primary links (currently Primary links). If you do this, the children of the active primary menu link will be displayed as secondary links."

ericclaeren’s picture

Very nice Drupal website, great theming. This one could definitely be used as a good practice example towards our clients, why Drupal sites are great.

Which module have you used for:

  • The "I am ready" forms on the website?
  • Tell-a-friend send e-mail

Keep up the good work!

dalin’s picture

Those are both done with a custom module. Just some very simple Forms API stuff. That I-am-ready form is used in 3 or 4 different places.

________________________
Dave Hansen-Lange
Director of Technical Strategy, FourKitchens.com

venusrising’s picture

Nice Job. The theme really works well with the site too clean and nice on the eyes. IS this a custom implementation or did you use and base theme like Zen to build on.

venusrising

aaron’s picture

We built on the Zen theme, which offers a clean, standards-compliant base to work from. We generally develop from that base theme for most of our sites these days.

BooRadley’s picture

Great Site. Just curious how you did the Copenhagen countdown block?

thank you,

Boo

aaron’s picture

The Copenhagen countdown block was a Flash implementation. In the past, we've also simply used a simple JavaScript for countdown timers, as DHTML is good for that.