Skip to main content
Mediacurrent logo
side view of red digital signage pixels

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.


    Why Drupal?

    • 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 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
    Front End DevelopmentAn image of a computer with code on the screen.

    Drupal + Gatsby + Netlify

    The Decoupled Dream Team

    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, it triggers a custom Netlify build hook that tells Netlify to re-query the JSON API for new or changed data.

    video thumbnail


    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.