splitlogo

Split Script

While working at Pure360 I created a number of email templates for clients, part of what we delivered to customers was a simple to use tool to create templates.

The email builder had a sidebar which displayed a list of all avalible blocks and a thumbnail sized image preview.

The SplitScript was an internal tool I build to take a large email template - Chop it into smaller parts and generate the screenshots.

  • Saves time - Screenshotting and resizing the images was a slow task
  • Runs in browser - giving access to the whole team
View on Github
splitflow

Take two three

I have used this tool to help increase my Javasript knowledge, I've rebuilt this a few times using different libiries each time.

Full email template loaded

Using a simple landing page, all you need to do is drag and drop your HTML file to get started

Chop

Using cheerio the full html email is split into sections around the class .backgroundTable

Save

The script empties the folder from any previous runs - Then saves each ‘block’ of HTML as a new file

Capture

All the newley created HTML files are now processed by Puppeter to screenshot them and crop them to the right size.

cheerioFind the tables with the class names
expressEnabled the web interface side of things
globSimple way to access folders and delete files
nodejsServer side JS makes it all possible
PuppeteerThe power behind the screenshots
zip-localCreates a zip file ready to be downloaded