A multisite Drupal platform handles high traffic and delivers a distinctive experience for individual teams.
The complexity and level of effort required for creating a platform for more than two dozen websites for a popular sports leagues are why the league turned to Mediacurrent. Our team has been able to create that platform – along with features like dynamic content lists, auto-tagging and live data stacks – which, in turn, means the league can deliver up-to-the-minute content to millions of fans. By taking the time to understand the league and the teams’ needs and concerns, Mediacurrent built a platform that allows each team to cater its site to its own needs and update the content as necessary.
Project Goals
- Build a system that will allow the league/teams to build multiple sites, but use the same functionality such as layouts so they are, in a way, customized sites.
- Deliver better tools so site editors can easily update content.
- Streamline the content creation process.
- Create a better mobile experience.
- Ensure sites are always up and running even with huge spikes in traffic, including 1M+ pageviews on game days.
- Integrate with league’s existing databases that feed real-time statistics and media to the team sites.
The teams want unique websites, but the professional sports league wants a common set of tools to maintain them. Drupal allows the league to maintain core features while the teams can express their own brands and content in unique ways. Mediacurrent preconfigured some layouts up front so that editors can change them on the fly by using Panelizer, which provides easy-to-use options for changing and customizing the layout. This gives individual teams the ability to switch between layouts on a particular page or pages.
The Views content panes module (A submodule in the CTools module) created an extremely flexible system to display multiple content types in different ways. One club’s site looks different from others in terms of what content is displayed — giving content editors the ability to create their own custom views without a developer’s help.
A new auto-tagging solution eliminates manual curation. Now, with a streamlined publishing workflow, teams simply add article content and the Mediacurrent tool recognizes player names, team names and other common details, and automatically links to them.
Content managers must create content while games are in play and embed complex objects inside big chunks of text. Video, photo and audio files can yield complicated HTML markups, but Mediacurrent borrowed some ideas from its Weather Channel project and created a system of wrappers for that complicated content. With one click, editorial teams can control how complex objects are displayed (and avoid some of the pitfalls of WYSIWYG).
The theming layer for this particular project was quite complex because we weren’t building one site for an individual team; we were building a system to quickly iterate sites for all teams in the league. That meant some site aspects, such as layouts, were reusable but others pieces were not, like the colors and fonts specific to each team.
To accomplish this, we harnessed the power of Sass. First, we created a base theme for the league that contained reusable element and module styles, as well as panels layouts. The base theme *only* contained Sass placeholders, mixins, and variables, which were largely focused on layout. Then we created a sub theme for each individual team in the league which extended the placeholder layout styles, and also added in typography and color styles. That way any individual team can remove or override sections of code that they want to change without adding duplicate CSS.
AdvAgg Replace: This module extends the Advanced CSS/JS Aggregation module to find and replace CSS variables so that content editors and site managers can easily modify the colors of elements on the site, without needing to touch the codebase.
Panels et al: The use of the Panels/CTools suite made for a very friendly user interface and allows content editors to easily switch between layouts and configure the way content is displayed.
Classy Panel Styles: This module allows editors to apply custom layouts or styles to individual panel panes, giving the site further flexibility and customization.
WYSIWYG: Mediacurrent developed its own system of wrappers for complicated content to make it simple to add an image, video or photo gallery into text. This gives editors much more control and avoids some of the pitfalls of a traditional WYSIWYG system.