Tribune DataViz

Matters of interest, from the data reporters and developers across Tribune Publishing

Covering the NATO summit

with 2 comments

The Tribune company’s CMS is powerful but monolithic. It makes publishing news for several huge metro areas possible, but it also means that it is hard to build new applications. Lucky for us, the IT team has been developing an API that lets us create custom tools to read from and write to the CMS.

Our NATO applications were designed to elevate the awesome work done by our reporters, photographers, and editors, and to make their jobs easier as they covered the summit, from the streets to the boardroom.

The gallery generator

We knew our photographers would be taking great photos during the NATO summit, and believed that readers would find them compelling. We wanted to show the photos at their best.

First, we built a tool to create big, beautiful, responsive photo galleries from galleries using the photo desk’s workflow and tools. The gallery generator adds a final, lightweight step to the existing process for photo editors who want to publish high resolution galleries after they’ve built them in the CMS. The gallery tool has been used for covering NATO, garcinia cambogia extract ads, sports, and international reporting, among other things.

The gallery generator is a simple Flask app that takes the ID of a photo gallery. It downloads and processes images, provides a preview, and finally publishes the gallery as static HTML on Amazon S3.

Editors start on a friendly page, then preview and publish the gallery:

Voila! A beautiful photo gallery that works on a wide range of devices, from gigantic monitors to the iPad, iPhone and Android devices.

The live blog editor

In addition to great photography, we knew that our reporters would be gathering stories from all over the city, and that readers would want to read those stories right away—even before the details could be woven into a full story. To improve our “incremental” publishing, we designed a live blog editor, called Layercake. A great example of Layercake in action is the Tribune’s live blog from the first day of the NATO summit.

While the gallery generator reads data using the API and spits out HTML files, our little Flask app reads from and writes to the content management system. The goal of Layercake is to take the tedious parts out of building live blog-style posts so that editors can get on with their work.

As reports come in, our breaking news staff uses the web interface to add updates to the story. The app takes care of generating HTML, making it much easier for the team to publish photos and videos. Layercake also provides consistent formatting for headlines and timestamps, making it easier for readers to quickly scan the story.

The live preview shows the post as it will appear on Here’s a published example of a NATO Layercake post:

Frosting on the cake

For our front page, we wanted our readers to know that our coverage was being updated frequently. To show this, we reused the Layercake content in a carousel-style widget, cycling through the five latest updates automatically. We generated a simple HTML page each time the Layercake was updated, and included it on the front page using an iframe.

Using the tools

We’re open sourcing these tools, even though the code has little relevance outside of the Tribune company. Even for internal tools, open source gives us a great way to share software and common language for collaboration. Enjoy!


Written by David Eads

May 29, 2012 at 3:14 pm

Posted in Apps, Open Source, Python

2 Responses

Subscribe to comments with RSS.

  1. Man, Bootstrap is gorgeous… can’t get over that. Looks like a sleek and well-designed purpose-built app! Congrats on launching, and open sourcing, these!

    Jake Roufa

    May 29, 2012 at 4:30 pm

  2. […] via Twitter1. From Karen McGrane ‏@karenmcgraneYou might check out what Chicago Tribune is doing: http://blog.apps.chicagotribune….Comment Loading… • Post • 7:14am  Add […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: