The Telegraph’s Matt comic email tool

Challenge

The Telegraph’s email newsletter team wanted to create a new weekly email containing all the week’s Matt cartoons. However, there were two challenges to overcome before that could happen:

  1. How to get the comic images from the main website into the email CMS?
  2. How to replace the comic header within the images with the correct day of the week text?

Solution

The digital version of the comic was stored within the site’s gallery pages. A site editor receives the scanned comic and manually creates a new page before uploading the image to the CMS. The site’s RSS feed acted as an unofficial API, allowing me to scrape the comic images and publication dates.

I wrote a React application that fetched the latest RSS feed of Matt’s Gallery, parsed out the images and dates, and stored it locally. The previous week’s comics could be retrieved either by entering a date or using navigation, upon which the required RSS feed would be fetched and parsed.

Now that I had the data, I was ready to create the custom email images using the browser’s Canvas API.

Using the URLs from the parsed data, I was able to retrieve the comic images and draw them into the <canvas>. The images were located on a different domain, which triggered the browser’s Cross-Origin Resource Sharing (CORS) protection. I had, however, encountered this issue on a previous project and had resolved it by setting up a CORS image proxy that added the allow-all: * response headers.

The next step was to add the weekday text. Matt wrote out each weekday, and I created transparent PNGs of each. Then, I masked out the previous headline with a white box and drew the weekday image on top.

The final step was to add a download action that would allow email editors to export the custom images. The Canvas API was again used to get the image as a blob, which was then converted into a Data URL and triggered a file download.

There was a late feature edition added the following week that allowed custom images to be uploaded manually, as it transpired that the original gallery was not always correct. It was designed as a safety measure in case editors encountered any issues.

The tool was a success, and we were able to launch the new email newsletter. The entire project took less than a week and did not require any additional backend services.

Project skills