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