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 froboy on
The University of Chicago News Office is the central hub for all outward-facing press at the University—from new academic majors to presidential visits. The staff of 10-12 news officers create and publish over 1000 stories, videos, and photo galleries per year, many of which get picked up by major TV networks, newspapers, Reddit, and other outlets.
In 2011, the News Office developed a Drupal 6/Pressflow-powered site, which by mid-2014 was starting to feel the weight of the evolving web with pressures for responsive design, better speed during high-traffic events, and better content management tools. With over 20,000 content nodes, however, moving the site would be no easy task.
In July 2014, the News Office contracted with Web Services to “Upgrade news.uchicago.edu from Drupal 6 to Drupal 7, preserving existing functionality. Update the design, including making it responsive.” Two years later, the new news.uchicago.edu launched: fully mobile-friendly, running on an upgraded hosting platform, and almost completely rebuilt from the ground up.
Why Drupal was chosen:
UChicago Web Services leverages a number of web technologies to facilitate development, but for this project Drupal was able to provide the heavy lifting migration power and the front-end complexity that could achieve our clients’ goals.
While originally scoped as a direct “migration,” our discovery process eventually uncovered a large amount of custom code and unused features that would need to be stripped out. We inventoried every module, view, panel, and feature in the old site with the client’s technical team, working to determine what was a core requirement and what could be removed. Drupal core’s 6-7 upgrade path got us kickstarted in building out our content types, but then we did a full audit (with print-outs and pens!) of every field to ensure it was relevant to the new site.
With our framework in place, the next technical hurdle was moving 10,000+ taxonomy terms, 11,000+ files, and 23,000+ nodes into the new site. Using Migrate module, our intrepid programmer was able to write custom migrations for each content type, massaging the old data into new formats and unorganized files into nice neat file entities. We developed a reproducible process for migrating content, such that we were able to easily bring new content into our development environment throughout the project. When it came to launch time, Migrate helped minimize our content freeze period as much as possible, since the news never stops.
Describe the project (goals, requirements and outcome):
In addition to a Drupal upgrade and a migration of 8 years of content, the News Office needed to go responsive in order to accommodate an audience comprised of over 40% mobile devices. They also wanted to increase the site speed—both on the backend and front—and improve the usability of the editor interface for the site.
Design Process
Our main design goals were to give the site a sleek, responsive look that allowed the client to feature big stories in an inspiring and engaging way. We decided to use the Bootstrap theme, which allowed us to use the Bootstrap grid in Photoshop. This translated nicely into development.
The design phase spanned two months, during which our designer worked closely (usually hands-on in Photoshop) with the client over a series of eight weekly meetings. This project's design needs were complex, and we wanted to streamline our existing processes by having the designer work rapidly.
Meeting with the clients one-on-one was at times exhausting for both parties, but we made tangible progress quickly. We could answer questions and test drive ideas easily in person, avoiding email back-and-forth that might take days otherwise. In meetings, we focused on solidifying the basic layout first, and then built up the brand's look and feel. We did this by beginning with low-fi, grayscale mockups, and worked our way up to detailed, colorful comps.
The main challenge we faced was that we needed to display various permutations of node data on story pages. The layout of the page needed to remain flexible while being editor-friendly. An article could be as simple as a few paragraphs, or as complex as a main feature story with interactive embeds and a full-screen cover image. Thanks to our iterative approach to the design process, we were able to start with the simplest version first, and then expand it based on potential need. The resulting flexibility in layout gave the client a wide array of visual tactics for illustrating their stories.
Speeding it up
The legacy news site ran Drupal 6 on a custom, locally hosted LAMP stack with PHP 5.3. Varnish had been configured, but the site still strained under heavy load. Additionally, PHP 5.3 had a hard time keeping up with the complexity of node edit pages. Our first step in speeding up the site was an audit of every module used on the old site. When combined with the information gleaned from our content type audit, we were able to remove a number of modules that had slowly crept in over time but weren’t adding significant value.
In addition to reducing technical complexity, we also moved the site from our custom local stack to Acquia Cloud. The simple move from PHP 5.3 to 5.6 proved shocking, with edit pages loading in a second or two, rather than 10 or more. Varnish out of the box proved invaluable, and once we refined our cache expiration strategy (with huge help from Expire and Acquia Purge) we were able to hit the site with 1000 simultaneous anonymous users, seeing little to no effect on the underlying web servers and response times measured in milliseconds instead of seconds. Condensing our past year’s peak 24-hour traffic into a period of 10 minutes didn’t even phase the production servers.
Technical specifications
Drupal version:
Drupal 7.x
Key modules/theme/distribution used:
Why these modules/theme/distribution were chosen:
A key feature requested for this site was the ability to use rich media in the context of news stories. Inline entity form helps editors add images en masse to the site (which, due to legacy issues are stored as nodes instead of media entities). Once this content is added to the site, Entity Embed (along with Editor and CKeditor) allows editors to easily embed content directly in the story body. Custom buttons are tailored to the unique content types of the site, then a popup dialog helps find the content with a standard autocomplete and embed it using the proper view mode and alignment. Behind the scenes, Display Suite view modes control how the embedded content is previewed and displayed on the front-end. This powerful workflow helped to bridge the divide between legacy data structures and modern content-building.
Social sharing was also a significant goal for this project, and as always, Drupal provided all the tools. Ridiculously Responsive Social Share Buttons gave us social buttons that 1) are lightweight and totally self-contained, 2) can be added to nodes with a click, and 3) and super-responsive.
Metatag and its submodules for OpenGraph and Twitter Cards mean we can easily control how our stories are being shared and its Token integration allows us to set node-based defaults to determine what of the complex content is shared where, including external content that’s pulled in with Media and Media:YouTube.
Finally, Site Alert gives editors an incredibly simple interface for the rare occasions where a site-wide alert might be needed. Messages are easily configurable for set times and can direct users to the official communications channel in the case of an emergency.
Community contributions:
A lot of custom code went into getting this project off the ground, but when possible we worked to contribute pieces back to the Drupal community. The Oxford Comma patch for the Text list formatter module, while still waiting to be committed, was incredibly useful due to our proximity to the Chicago Manual of Style. Despite leveraging the amazing Expire and Acquia Purge modules, we still needed some custom expiration rules to expire nodes which reference the expiring node, which is submitted as a proposed new feature. A number of discussions happened in the issue queues for Editor and Entity Embed, working on getting those D8 backports ready for prime time in D7.
Team members:
Project team:
Katie Kranz, Project Manager
Brenda Janish, Interaction Designer
Sectors:
Education
Comments
Good job
I love this project, congrads to dev team. There is future in drupal