How we used an open source meme generator to promote our journalism
From Meme to CardKit
One of the tasks of a digital team in any major news organisation is to make the newsroom more efficient. We leverage new technologies in ways that haven’t been done before, and at a pace that’s challenging to keep up with. At The Times and Sunday Times, our team is constantly on the lookout for ways of improving our editorial workflow, and ensuring we get the very best from our great quality journalism.
The digital development team have recently starting looking towards open source (I won’t cover it here, but a Google search will fill you in) as a way of improving our editorial workflow, along with producing better code quicker and contributing back to the community with our own expertise. We recently launched Axis version 1.0, an open source AngularJS charting tool, alongside a number of smaller open source products including WordPress plugins and AngularJS modules. We’ve also forked and modified existing code bases, giving birth to CardKit.
In September 2014, having recently launched Red Box (related reading: see this great Medium article from Callum Jones about Red Box), we wanted an easy way to create and share social cards with our readers. After a rally round the team someone suggested looking at Vox Media’s ‘meme’, an open source social card making tool. A few hours of tinkering later, and we had our own version set up with some simple functionality, along with a new name: CardKit.
With a base version set up, we then spent some time talking to the newsroom, along with our design team, gathering ideas and requirements. Over the next few weeks, we distilled these requirements into a few key features CardKit needed:
- Theming — allowing editors and journalists the flexibility to create interesting cards, but within specified design guidelines
- Branding — a series of Times and Sunday Times branded elements, including our £1 for 30-days trial offer badge
- Control — control over the position of multiple elements on the card
After some development and testing time, we had successfully extended Meme to create a tool we were proud of, which served the needs of our newsroom, and making shareable social cards far more efficient.
Of course, we weren’t finished there. In the process of developing CardKit, we had faced a number of challenges, particularly with the way Meme handled multiple draggable elements, and its use of HTML5 <canvas>. In December, I stumbled into a great library called Snap.svg, a powerful and feature-rich SVG library, which is also open source. After reading the documentation, it became apparent it could become the core of a new CardKit, with increased flexibility and modularity, making it easier for us to achieve our goals, whilst still allowing other users to create the cards they require.
This new version of CardKit (conveniently dubbed CardKit v2), is currently available on GitHub. CardKit v2 implements a simple configuration object, meaning each instance of it can have a different set of editable elements (currently images, text, groups, and shapes). Development is still in its early stages, with a long way to go before it’s ready for use in production. We’ve been able to take some great features from Vox’s Meme project, combine it with our own experience and requirements, to produce something that helps our newsroom do something better, and can feed back into the vibrant open source community the project found its roots in.
We aim for CardKit to become a simple and easy to use tool for everyone to quickly and dynamically create images with rich media. Beyond social sharing cards, we see other uses for CardKit, which have been factored in to its development:
- A simple tool for crediting photos — reducing the need to write “(Credit: AP)”, for example, in tweets, saving vital characters
- Becoming embeddable, an easy way to create customisable modules for a website that is difficult to extend (think, adding a customised author biography to an article in a WordPress.com theme)
- Anything else...! We’ve built it so anyone can run a version of CardKit and set up their own configuration suited to their needs — it’s not tied in to any single output style or layout
We’ll be actively developing CardKit v2 over the next few months, so keep an eye on our GitHub account and Twitter account for further updates.
