Close-up of a white line on green grass in a soccer field

Professional Sports League

A multisite Drupal platform handles high traffic and delivers a distinctive experience for individual teams.

Project Highlights

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.

Why Drupal?

The league had its own proprietary platform (Interwoven), but it was failing at critical times and lacked flexibility and robustness. Drupal allows the teams to reproduce sites very much like the current sites, but with more functional interfaces and tools that give enhanced flexibility and editing capabilities. Drupal also enhances mobile compatibility through responsive web design and tools that can be used on the backend with tablets, in addition to these benefits:

Greater flexibility and innovation
Robust feature set for any device
Ease of publishing content including images and video
Streamlined the publishing workflow
Reusable code and centralized management system mean low cost

Challenges and Solutions

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.

Dynamic content lists

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.

Auto-tagging

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.

Live data stacks

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

Theming

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.

Development

Featured Modules

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.

Custom Layouts

In addition, we needed to be able to make some theming elements customizable by content editors who were not going to be able to directly edit the theme layer. We did so by utilizing the Drupal module Panelizer, which allows admins to rearrange the content within the Panels layout, or choose an entirely new layout per section or per node. Then the Classy Panel Styles module allows editors to apply custom layouts or styles to each panel pane, which provides even more fine-grained control. This gives individual teams a lot of flexibility to make their site unique.