- 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.
Easy maintenance: 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.
Flexible layouts: 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.
Enhanced flexibility: 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, which was another important feature for the league.
Dynamic content lists: The league also had built-in tools for dynamic lists of content, but Mediacurrent employed the Views content panes module (A submodule in the CTools module) to make an extremely flexible system so that any type of content could be displayed in multiple ways. This gives the league flexibility so 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. For example, fans see headlines or lists of recent videos on one team’s homepage that look and behave differently than other team sites, but editors use the same tools in different ways to deliver these components.
Auto-tagging: Teams want to be able to easily tag articles with taxonomies like player names, but don’t want to spend time to curate the content. Mediacurrent improved upon existing tools to come up with a new auto-tagging solution that eliminates manual curation. Now, teams simply add article content and the Mediacurrent tool recognizes player names, team names and other common details, and automatically links to them. This streamlines the publishing workflow as it means fewer steps for editors to click through and manually curate.
Live data stacks: During the season, content managers must create content while games are being played and they need the ability to easily 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. In practice, team site editors need to just click a button when they want to add an image, video or photo gallery and a token is inserted into the actual text. This gives the editorial teams much more control over how complex objects are displayed and avoids some of the pitfalls of WYSIWYG.
Reusing images: The league/teams also wanted to be able to reuse uploaded images across sites, but sometimes with slight alterations, such as captions. They also wanted more flexibility in terms of basic responsiveness by loading smaller images on mobile devices.
Focal point in images: Mediacurrent also added a smart-focus cropping system so that the content editor can pick a focal point of the image to be displayed on mobile devices. If the image is cropped to fit a smaller screen, it doesn’t crop to the center, but rather the focal point.
Fixed width ads: Mediacurrent had to build around fixed width ads, which is complicated for responsive design. Our team utilized Google Publisher Tag's size mapping configuration to load appropriate ad sizes for each breakpoint.
Teamwork: Because this was a large effort with a sensitive timeline, it required a bigger team for the presentation layer than a typical project and Mediacurrent had to figure out a way to break up the work into components of the site for multiple people.
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. Therefore, this was a puzzle with many pieces.
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.
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.
It was also a requested feature that content admins be able to change colors on specific elements on the site such as menus or headlines. We weren't going to be able to use the color module because that would change certain colors on many items site-wide, and we needed more specificity. So instead, we customized the Advanced Aggregation module to find and replace CSS Variables. In order to make such changes easy, we created a custom Drupal admin interface that allows editors to simply override the colors for particular items. That way staff members who want to adjust specific site elements can do so, like making page titles pink for Breast Cancer Awareness Month. They may also tell that element to revert to its default color to undo any changes.
We also needed to provide flexibility in how images could be used. It is better to reuse images rather than uploading the same image repeatedly, so we had to customize how original images are stored and then how iterations of that image can be used. We implemented a smart-focus cropping system that allows content editors to click on the focal point of an image so that when that image is cropped for smaller mobile screens, the focal point of the image (like faces) are always visible. Captions are also customizable per instance of each image. By using element queries, appropriate sizes of images are also served up based on the size of the container, rather than the browser window. That way images that are actually quite small, like those in the sidebar region on desktop browsers, are only loaded at 300px rather than 960px, which improves the page speed for desktop users too.
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.
The complexity and level of effort required for creating a platform for more than two dozen websites for a popular sports leagues is 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.
Watch out for the team sites as they roll out.