Learn how a new decoupled platform powers digital signage and unifies the city’s information systems.
Located just north of Atlanta, Sandy Springs is the 6th largest city in Georgia with a population of more than 100,000. At its heart is City Springs, a thriving downtown area home to City Hall and a new Performing Arts Center.
Sandy Springs is a city built on creative thinking and determination. They captured a bold vision for a unified platform to bring together new and existing information systems. To get there, the Sandy Springs communications team partnered with Mediacurrent on a new Drupal decoupled platform architecture to power both the City Springs website and its digital signage network. Now, the Sandy Springs team can create content once and publish it everywhere.
- Open source software proven in government sector
- Community support
- Reliability
- Scalability
- Security
The Challenge
Sandy Springs needed a better way to publish messages across multiple content channels— including citysprings.com and digital signage. Under the existing city information system infrastructure, content would need to be created as many as 13 separate times. City staff strained to manage infrastructure, provide user accounts, workflow, and training for each information system.
Sandy Springs came to Mediacurrent with a challenge: redesign an existing website to promote City Springs and use Drupal 8 to share event data with digital signage as well as other information systems in the future.
Mediacurrent’s Solution
A decoupled approach, where front end templating is separate from the content management system and database was required to achieve a unified system. Proven as a powerful decoupled CMS, Drupal replaced the city’s existing WordPress site.
On the back end, a Drupal 8 foundation manages content. On the front end, GatsbyJS presents content. With this approach, the Sandy Springs team could “create once, publish everywhere,” with a more efficient process for sharing information with the local community.
GatsbyJS, a React-based framework, was instrumental to the decoupled build. The static site generator created flat HTML, CSS, and JS files that can be posted anywhere and loaded up in the browser quickly. The JSON API Drupal module exposes feeds of data from the decoupled Drupal CMS to Gatsby.
Netlify was used to deploy Gatsby. It functions to expose an API and rebuild the site as needed. When a user enters content into Drupal and promotes it to CitySprings.com, it triggers a custom Netlify build hook that tells Netlify to re-query the JSON API for new or changed data.
In this video presentation from Gatsby Days Bay Area, Mediacurrent developer Ben Robertson explains the advantages Sandy Springs has realized by leveraging GatsbyJS:
- Stable: With full control over the markup, the site was faster to build.
- Scalable: Gatsby will make it easier for the client to add additional sites in the future.
- Speedy: Gatsby bakes in a lot of performance optimization for the front end, ultimately delivering a faster site.
- Hosting: The Drupal site is never used by a non-editorial user, so fewer hosting resources are needed.
For their first foray into digital signage, the city selected Navori, a 3rd party software to schedule and play content through media players. Our challenge was to create a custom route and controller that generated a filterable XML response that Navori could read to populate its templates. Because Navori needed an RSS feed, and RSS only accepts specific XML elements like <title> or <description>, we leveraged custom XML namespaces to provide our own XML elements, such as <ssg:sponsor> and <ssg:venue>.
At first, when Navori hit Drupal for the data, the image styles were not yet loaded. In a traditional “coupled” build, as images are called, their image styles are generated and stored for future calls. With the front end decoupled from the Drupal back end, we needed a way to call those images for that first time. A Drupal module, Image Style Warmer, helps to generate the image styles as part of the image upload process in the admin. This way, the image styles are generated at the time Navori needs them, loading them into the Navori UI templates.
A Promotion taxonomy specifies where content should be displayed across all consuming applications. Content tagged to a Promotion is added as an entity reference item in the Promotion term that it was tagged with. This matches with how the Gatsby side was querying to know when to show what content and in what order, based on promotion.
- JSON API - This module was critical in our decoupled setup. The front end calls the JSON API for data from Drupal.
- Focal Point - Allows content editors to focus on certain parts of images, selecting what’s most important.
- Simple Hierarchical Select - Allows a first level taxonomy selection and displays children of the selected taxonomy. Used in the tagging system.
Patches to Social Post Facebook and Social Post Twitter were contributed back to the community as a result of this project.
- Review the issue ticket for the Social Post Facebook project: Posting to a Facebook page
- Review the issue ticket for the Social Post Twitter project: Posting media with a social post
Through a support agreement, Mediacurrent and Sandy Springs will continue working together to achieve the city’s vision of a unified platform for all its information systems.