Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By Mediacurrent on
Penn State News, a digital platform that drives 7 million page views each year, was powered by a highly customized and complicated back-end. With 250 content editors and a syndication network that includes more than 20 Penn State campuses across the state, the platform needed to be optimized for speed and real-time collaboration.
We successfully migrated Penn State News from a monolithic back-end to a decoupled Drupal 9 site, using the JavaScript framework Gatsby. Working closely with the Penn State team we created a living design system that empowered users and provides a repeatable standard for how Penn State can both enhance and protect their brand.
Why Drupal was chosen:
- Powerful content moderation features for complex editorial workflows
- Publish everywhere. Drupal provides a content hub for all frontends and services that need to interact with Penn State News content.
- Proven track record in higher ed
- Flexibility to model complex data
Describe the project (goals, requirements and outcome):
A Living Design System
We created a design system using the front-end framework React. Every component was built in Storybook, an Open Source tool used for building, testing and maintaining responsive design systems. Components in Storybook could be tested using mock data before integration, ensuring that they could handle common and edge cases with ease.
Easier Design for Editors
With a large and distributed editorial team, Penn State News needed an authoring experience that gave content editors flexibility while maintaining brand consistency. We worked closely with writers, editors and content managers to develop an efficient workflow with real-time previewing so changes could be made quickly and stories published with ease.
Increased Optimization Speed
The large volume of images hosted on the site caused major slowdowns in page load time and availability. We vastly improved page speed by moving images to Amazon Web Services (AWS) where they can be requested and loaded on demand. This update improved page speed across the entire site, making the site easier to navigate for all users.
Check out our on-demand webinar where we partner with Penn State and the Drupal Association to give an inside look at how Drupal and Gatsby were leveraged to create a digital storytelling platform with the ability to scale throughout Penn State.
Technical specifications
Drupal version:
Drupal 9.x
Key modules/theme/distribution used:
Why these modules/theme/distribution were chosen:
- Paragraphs - Content authoring experience
- Rain / Guardr Distributions - Content authoring experience / Drupal security
- Gatsby Module/JSON API - This approach was leveraged to push content out to campus sites
- Content Moderation/Workflows - Supports the editorial workflow
- Workbench/Workbench Access - Supports the editorial workflow, creating editorial access controls
Organizations involved:
Sectors:
Education
