Why Build This?

Over the past two years, the NPR Visuals Team has invested in a particular kind of newsroom tool: those that create specific types of images for sharing across social media. Eventually, we had three tools that did very similar things: Quotable, Waterbug, and Factlist. Quotable creates images of pull quotes, Waterbug adds a watermarked logo and attribution line to existing images, and Factlist creates images of lists of items, such as facts known in breaking news scenarios.

While we deployed all of these tools to an internal fileserver for use within our newsroom at NPR, it was unclear how they were related. And while each project was open-sourced, they relied on subtly different tech stacks, so if another newsroom wanted these tools, they would have to work with three slightly different apps. When the time came to plan for the Code Convening, we saw the opportunity to consolidate three similar apps and improve how newsrooms, ours included, could roll them out to the staff that would use the tools.

Why Are These Tools Useful?

It has been proven time and time again that using images on your social media presence increases engagement. Specifically at NPR, sharing audio-driven stories on text-driven platforms like Twitter can prove difficult, so we need as many possibilities for visual content as possible. These tools provide solutions for sharable images in different situations.

Quotable works for content with memorable characters and quotations. The pull quotes Quotable creates can give your audience a sense of the tone of the story, or even act as an apt summary of a particular character’s purpose in a story.

John Maynard Keynes predicted we’d be living a life of leisure by now. He was wrong. http://t.co/e8GtlwxkRd pic.twitter.com/1tIerC4O4M

— NPR (@NPR) July 26, 2015

Waterbug works when content has an image associated with it and proper credit needs to be given to the photographer in a limited character space (hint: you always have to do this). At NPR, we use Waterbug for every image that gets tweeted from an official NPR account. Sometimes, this is a contractual obligation, like with wire photos from AP or Getty. Other times, like when NPR owns the image, we want to make sure the image travels across social media with our branding on it.

Put That Wok To Work: A Trick For Smoking Fish Indoors http://t.co/K3o9MSQ4o8 pic.twitter.com/4mSGF2td0n

— NPR (@NPR) July 26, 2015

Factlist is particularly useful in breaking news situations where all we have are facts and rumors, with no visual assets available yet. With Factlist, you can solidify the facts you know at a current time (and make clear what time the image was created with a timestamp), and make them easily readable for your social audience. Factlist is a new tool to the Lunchbox suite, so we have not actually used these at NPR yet.

How It Works

The app structure is a combination of NPR Visuals’ Flask-based app template and Atom’s Electron framework for building cross-platform desktop applications with web technologies.

Developing with the app is like developing with any of NPR Visuals’ applications – you run the Flask app locally, and it offers easy Fabric commands to bake the app into static HTML. The difference is the deployment process runs Node scripts that package the app into an Electron app and then create ready-to-use installers for Windows and Mac OS X.

Each of the three tools creates the output image using the HTML5 Canvas API, though in slightly different ways. Quotable and Factlist use MediumEditor to provide an inline, WYSIWIG editing interface powered with HTML and CSS, and html2canvas to take a “screenshot” of the editing area. Meanwhile, Waterbug uses an existing image and superimposes a logo and text on top of it, which is easier to accomplish with the Canvas API directly in JavaScript.

Who This Is For

When considering what to build and how to unify the three existing tools, we focused on two primary users. First, those in the newsroom sharing content on social media. The decision to create a cross-platform desktop-based app was meant to keep use simple and familiar, making it easier to focus on the post itself and subsequent steps of engagement.

The second group are those in media organizations who create tools for the newsroom. Open-sourcing Lunchbox allows anyone to make it their own, but we also decided to streamline customization (with shared attributes between Factlist and Quotable, for example) and no dependence on external or online configuration files. Assuming you have your organization’s assets ready (logos and color system), you can go through the entire process—from setting variables to deploying the app—within an hour.

How You Can Use It

A goal of this project was to make configuration and customization—e.g., custom fonts and logos—simple. To implement Lunchbox for your newsroom, you can fork the repo and make the necessary changes for your news organization’s branding.

Due to the differing implementations of Canvas, there are two separate places for configuration. For Quotable and Factlist, configuration is done entirely through a LESS file called variables.less. This file allows you to define fonts, logos, and colors used on the canvas, as well as make tweaks to font rendering options and margins around the image.

Quotable and Factlist also support up to four separate themes, so if your news organization requires different branding for different accounts (like NPR vs. NPR Music), you can add those. This can also be used for sections and news desks that have their own unique branding.

Meanwhile, Waterbug is configured through a file called waterbug-config.js. This file similarly allows customization of logos, colors, margins, and other small tweaks. You can (and should) provide a white and black version of every logo you want to use so that you can put the logo over both light and dark images to ensure sufficient contrast.

Importantly, this file allows you to create the copyright styles that your newsroom requires, which are likely slightly different for every news organization. Each copyright style has six properties:

• showPhotographer: Whether or not the form UI should show the Photographer field.
• showSource: Whether or not the form UI should show the Source field.
• photographerRequired: Whether or not the user has to provide a photographer name.
• sourceRequired: Whether or not the user has to provide a source.
• source: If the source is always the same (e.g., “Getty Image”), then Waterbug can automatically fill in the source to prevent typos.
• display: How the option will appear in the dropdown menu where users select the copyright option.

Thus, the configuration for the Getty Images style might look like this:

    'getty': {
        showPhotographer: true,
        showSource: false,
        photographerRequired: false,
        sourceRequired: false,
        source: 'Getty Images',
        display: 'Getty' 
    }

Configurable copyright options add an additional layer of complexity to the app, but it is a necessary step. Waterbug’s main purpose is to properly give credit to photographers while not wasting characters on that attribution (this is especially useful on Twitter as images take up 23 of the the 140 character limit).

For more details on implementing Lunchbox for your newsroom, read the documentation at the GitHub repo.

Next Steps

There is still work to be done on Lunchbox. On our list:

• An easy versioning and updating process so newsrooms can automatically roll out new releases of the desktop app
• Make the theming process for Quotable and Factlist a little easier
• Figure out app signing so that the application opens without explicitly allowing unsigned applications (due to OSX and Windows security settings)
• Emoji support for Quotable and Factlist and various styling tweaks and enhancements

If you want to get involved, fork the repo and try it out! Open issues, submit pull requests, or send us feedback on Twitter. You can find Tyler at @tylrfishr and Livia at @livlab.