Skip to main content

Case Study

Digital Display With Decoupled Drupal 8 + GatsbyJS

Learn how a new decoupled platform powers digital signage and unifies the city’s information systems.

Project Highlights

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.

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. 

Sandy Springs Drupal and Gatsby website on tablet and laptop
video thumbnail image

Video

Case Study: Trends in Modern Web Development

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.

Digital Signage with Drupal

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.

Sandy Springs digital signage
Sandy Springs Drupal digital signage kiosk

Promoting Content with Taxonomy

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.

Top Drupal Modules

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

City springs building

Final Thoughts 

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. 

Access icon Up arrow icon Drupal 8 icon Facebook icon - white Facebook icon - blue outline Facebook icon - yellow Hollow right arrow icon Hollow right arrow icon - white LinkedIn icon - white LinkedIn icon - hollow LinkedIn icon - blue outline LinkedIn icon - yellow Mediacurrent wordmark Quote icon Twitter icon - white Twitter icon - hollow Twitter icon - blue outline Twitter icon - yellow Youtube icon - white Youtube icon - yellow