How Robin Hood and Phase2 Created an Online Response to Hurricane Sandy Quickly and Successfully

When it comes to creating layout and design, empowering content editors is key to a successful project. We learned just how important content flexibility can be while working with Robin Hood, New York’s largest poverty- fighting organization. When Hurricane Sandy hit, Robin Hood was able to use the flexible content environment that we developed for them to quickly and efficiently launch new pages detailing the mobilization of their large-scale relief effort to aid victims in the tri-state area.

Brian McMurray, Software Architect
Posted

When it comes to creating layout and design, empowering content editors is key to a successful project. We learned just how important content flexibility can be while working with Robin Hood, New York’s largest poverty- fighting organization. When Hurricane Sandy hit, Robin Hood was able to use the flexible content environment that we developed for them to quickly and efficiently launch new pages detailing the mobilization of their large-scale relief effort to aid victims in the tri-state area. Robin Hood needed a flexible content solution for their website which emphasized their vibrant design, and which could be updated quickly as their relief efforts expanded. They wanted control when it came to content layout and they wanted to be able to reuse content like their rich media, dynamic displays, and large images and videos across their site. Our solution was to develop a flexible content architecture using Template Field and a customized WYSIWYG.   Hurricane Sandy Relief Campaign homepage, created with Template Field We organized Robin Hood’s content by a content type called a ‘Pane,’ which has a Template field. A number of custom templates are available that allow the Robin Hood team to pick different combinations of multiple column layouts, as well as some highly interactive templates that create interactive animations, powered by Raphaël, a JavaScript library for vector graphics on the web. A custom interactive template for Template Field called "City Stats" powered by RaphaëlJS We developed another content type called ‘Pane Stacks,’ which is a collection of Panes stacked together to create complex and compelling pages. Jimmy Park, of Robin Hood, says, “Pane Stacks are awesome. It allows us to be so flexible and fast. Both the homepage and the [Hurricane] Sandy pages were done with ‘configuration.’ Ridiculous when you think about it.” In addition to the flexibility provided by Template Field and the content architecture of the Robin Hood site, content editors are further empowered by a robust WYSIWYG editor within the site. Custom WYSIWYG styles help content editors to keep within brand style guidelines but still have room to customize color, font, size and spacing when deviations from the site’s styles are necessary. Additionally, content editors can easily embed blocks and Beans into WYSIWYG content, allowing them to insert video content, social media widgets, and custom interactive call-to-action elements. The content flexibility created with Template Field and WYSIWYG customization gives a lot of creative power to content editors, allowing Robin Hood to quickly create Hurricane Sandy Relief campaign pages, getting their message out to donors, media and others efficiently.  A 'pane' with video embeds

How Template Field Works:

Template Field was developed by a group of Drupal community and Phase2 team members led by Roger López, Neil Hastings, Brian McMurray, and John Robert Wilson. From the beginning it was designed to work as a developer tool with a robust API, as well as a content administrator tool with an administrative interface. Template Field is made up of three component modules:  

  • Template API - The base API for defining, loading, and working with Templates
  • Template Field - A Field API Implementation that allows users to add templates to their content types
  • Template Mustache - A rendering library for Template API that uses Mustache

The Template Field module suite was an effort to avoid having to create a different content type per layout, and then theming them differently. Instead, Template Field bundles together the HTML, CSS, JS, and specialized inputs necessary for a particular custom layout and to store all of those different layouts uniformly as a Drupal entity field. What this means is that we (or a content administrator using an admin interface in the site) can put together a package of flexible field-like inputs (text fields, file uploads, WYSIWYG text areas, checkboxes, etc), specific HTML for formatting the output (using the Mustache template library, more on that in a second), CSS for styling, and JavaScript to add interactivity. All of these things are bundled together as “templated content.” You can then create a single content type on your site (perhaps you’d call it ‘page’), add a template field, and then when creating page content, you have access to your templates to pick and then fill out with content. You could have a ‘page’ with multiple extra image files uploaded, a ‘page’ with highly interactive JavaScript, or a ‘page’ with its content divided into multiple columns – all using the exact same content type so it only needs to be themed once. The rendering layer of the Template API is pluggable, which means that a rendering library other than Mustache could be used as well. Currently, Template Mustache is the only rendering library available. Templates can be created in code directly, with a developer specifying inputs (like fields on a content type), and specific CSS, JS, and HTML files for the template to use; or templates can be created and managed using an administrative interface that can store template information in the database, or be exported to code later using Features. Because Mustache is a really simple template language, and because the Template API keeps input names for templates simple, even people unfamiliar with the intricacies of Drupal theming can put together new custom layouts for their template in minutes, and because a content administrator can add the CSS or JavaScript necessary for the template directly in the administrative interface, you don’t have to perform updates to your site’s theme to roll out new designs. Template Field has proved itself in creating flexible experiences for admins to respond to crisis and unplanned relief situations. Content staging elements can also be added to Template Field to provide revisioning and permissions to the admins and content editors. We are excited to see how Template Field will be refined and used in more projects moving forward.

 

Brian McMurray

Software Architect