Automate Designs with Bannerbear and n8n
Tags: tutorial, api, graphicdesign, automation
Published: 2020-05-22 07:08:08

---
title: Automate Designs with Bannerbear and n8n
published: true
date: 2020-05-19 12:19:49 UTC
tags: tutorial,api,graphicdesign,automation
canonical_url: https://n8n.io/blog/automate-designs-with-bannerbear-and-n8n/
---

As a designer and self-proclaimed data nerd, I’ve been involved in [proceduralizing](https://en.wikipedia.org/wiki/Procedural_generation) creative deliverables for some time. Up until now however, my concepts always had to reconcile with the limitations of [InDesign](https://www.adobe.com/products/indesign.html) macros or my coding skills. [n8n](https://n8n.io) empowers me to apply my basic understanding of data objects and the interwebs to create some pretty slick automations with minimal effort.

![](https://cdn-images-1.medium.com/max/1024/1*-hgpo9yBGc6kNrw4CkTA6A.jpeg)<figcaption>Automating designs with Bannerbear and n8n</figcaption>

When it comes to creativity in a design context, many tasks don’t involve a whole lot of creativity — for example, updating a daily quote post graphic. What piques my interest is how do we empower designers to stay creative and leave the grunt work to automation.

In this tutorial, I will teach you how to create your very own procedural graphic banner workflow. Using a styled template, we’ll automate modifying image and text layers to generate creative graphics on-demand. In the interest of fun, we’ll create some Cocktail Recipe banners. However, this workflow can easily be tweaked to be very useful in marketing, e-commerce, and beyond.

### Creating the workflow in five parts

We’ll use n8n integrations for [Bannerbear](https://www.bannerbear.com/) and [Rocket.Chat](https://rocket.chat/) to get this workflow up and running. Rocket.Chat is a scalable and open-source alternative to messaging app [Slack](https://slack.com), and Bannerbear is a simple REST API that automatically generates variations of graphic templates at scale.

To accomplish this, we’ll go through five steps:

1. Creating a [*Cron*](https://docs.n8n.io/nodes/n8n-nodes-base.cron/) node
2. Creating an [*HTTP Request*](https://docs.n8n.io/nodes/n8n-nodes-base.httpRequest) node
3. Designing a Bannerbear template
4. Creating a [*Bannerbear*](https://docs.n8n.io/nodes/n8n-nodes-base.bannerbear/) node
5. Creating a [*Rocket.Chat*](https://docs.n8n.io/nodes/n8n-nodes-base.rocketchat/) node

I have also submitted the [workflow](https://n8n.io/workflows/365) (the workflow was build using n8n@0.111.0) on n8n.io, in case you’d like to skim through it. Please note that you’ll still need to configure a couple of things like your credentials as well as the settings of the *Bannerbear* and *Rocket.Chat* node. You can find information on how to set up n8n in the [documentation](https://docs.n8n.io/#/setup). Alternatively, you can sign-up for [n8n.cloud](https://n8n.cloud) to get access to our hosted service.

### 1. Cron node: Trigger the workflow every Friday evening

In the Node Editor view, add a new node by clicking on the '***+***' button on the top right of the Editor UI. Select the _Cron_ node under the ***Triggers*** section. Click on the ***Add Cron Time*** button, select ‘Every Week’ as the ***Mode***, ‘18’ as the ***Hour***, and ‘Friday’ as the ***Weekday***. You can set the cron job to trigger whenever you like.

In my case, it’ll trigger at 6 PM, giving me enough time to prepare the cocktail before enjoying it. Unfortunately, the workflow can’t make the actual cocktail for you … yet 🙃

Here’s a video of me following the steps above.

{% youtube e2fu5-QyFEE %}

### 2. HTTP Request node: Get random cocktail recipe data

Next, let’s add an *HTTP Request* node. It can be used to query an [API](https://docs.n8n.io/reference/glossary.html#api) so that we can fetch a random cocktail recipe whenever the workflow is triggered.

We’ll use [TheCocktailDB](https://www.thecocktaildb.com/api.php) to get information about a random cocktail recipe. They offer a free test API key and each Cocktail comes with an image, name and recipe which will be perfect for our use case. Create the *HTTP Request* node by clicking on the '***+***' button on the top right of the Editor UI. In the node configuration view, enter the following URL:

[https://www.thecocktaildb.com/api/json/v1/1/random.php](https://www.thecocktaildb.com/api/json/v1/1/random.php)

When you click on the ***Execute Node*** button, you’ll see that the node will pull in the details of a random cocktail for you. Here’s a video of me following the steps mentioned above.

{% youtube z0ild90leUU %}

#### **3. Bannerbear app: create a template**

First of all, create a free [Bannerbear](https://www.bannerbear.com/) account. Now, create a new Project. I named mine ‘Cocktail Recipes’. Each project in Bannerbear can house many templates. Create a new template by clicking on the ***Create a Template*** button. Next, select ‘Square (1000x1000)’ as your size format and hit ***Save***.

Now, click on ***Edit Template*** to open the template designer — if you’ve ever used Photoshop or Sketch, this should look familiar. It’s a typical layer-based design tool, where you add layers of images, text, and shapes to create your graphic template. CocktailDB provides a square image for each cocktail entry, so let’s use that as a background image for our template. Click the + icon next to _New Layer_ on the left-hand side panel, and select “Image Rectangle (API)”.

> **Note:** Don’t select ‘Image’ as we need the API functionality to be able to modify this image programmatically and use Bannerbear’s fancy auto-resizing logic.

On your canvas, click on the newly added image and resize it to fit the entire canvas. Here’s a video of me following the steps mentioned above.

{% youtube 1kcIg1uGivM %}

With the ‘Image Rectangle’ still selected, set the ***Type*** to `fill`. Set ***AnchorX*** and ***AnchorY*** to ‘center’ from the ***Layer property*** panel (located on the right-hand side of your canvas). This will ensure that images scale to fit the whole canvas while maintaining their aspect ratio — to avoid it looking “squished”. Lastly, set the layer’s name to `cocktail-image`— we’ll use this later to access the layer from n8n.

Next, add another new layer and select ‘Text (API)’ from the dropdown. Set the layer’s name to `title`. Increase the font size to ±80 as we’ll use this layer for our Cocktail name. Feel free to style or position it how you like.

Repeat this step and create another text layer, this time naming it `recipe`. In my template, I’m overlaying the recipe instructions over the Cocktail image. To ensure it’s always legible, for example, when the background image has lots of light colors, you can opt to assign a “Background color” to the text. Here’s a GIF of me following the steps mentioned above.

{% youtube rQ6l8BiCRP8 %}

Lastly, I created some overlay graphics in Illustrator to give our banner some visual oomph. This is a great way to incorporate a visual identity into the template and offload the “heavy lifting” of design into more advanced tools. [Download the assets](https://drive.google.com/drive/folders/1NxMcEebuY2me76gdAzea0O-TJl_O67X3?usp=sharing) I created or design your own (free templates are available for personal use on [vecteezy.com](https://www.vecteezy.com/)). In the template editor, Add a new layer, select “Image” then upload your image via the ***Layer property*** panel.

Below is a photo reference of our final template in the Bannerbear editor.

![](https://cdn-images-1.medium.com/max/1024/1*1Frz6q5qrj38pxOMgKEc8A.png)<figcaption>Finished Cocktail Recipe template</figcaption>

### **4. Bannerbear node: Automate the image design**

Before switching back to the n8n editor, click on the ***Settings / API Key*** button in Bannerbear and copy the ***Project API Key***. Back in the n8n editor, we will add a Bannerbear node to automate creating variations of our template.

In the Bannerbear node, add a new credential and paste the _Project API Key_ there. Select ‘Cocktail Recipe’ as the ***Template ID*** from the dropdown. Now, click on the ***Add Field*** button, select ‘Wait for Image’ and toggle the button to activate it. Since Bannerbear takes a few seconds to generate the image, this option makes sure that the node waits until the image has been created and passes the image URL in the result.

Now, under the ***Modifications*** section, click on the ***Add Modification*** button. First of all, let’s specify the background image by selecting the cocktail-image layer. Since the Image URL is a dynamic piece of information, click on the ***Add Expression*** button by clicking on the gears icon. In the ***Variable Selector***, choose the following variable:

`Current Node > Input Data > JSON > drinks > [Item: 0] > strDrinkThumb`

Add another modification, select the title layer and in the ***Text*** field, select the following from the ***Variable Selector***:

`Current Node > Input Data > JSON > drinks > [Item: 0] > strDrink`

Finally, add another modification, select the recipe layer and in the ***Text*** field, select the following from the ***Variable Selector***:

`Current Node > Input Data > JSON > drinks > [Item: 0] > strInstructions`

Now, click on the ***Execute Node*** button, you’ll see that the node will output the prepared image’s URL as well. Here’s a video of me following the steps mentioned above.

{% youtube a-obLjhHx-k  %}

### **5. Rocket.Chat node: Post the image in a channel**

Add a *Rocket.Chat* node by clicking on the '***+***' button on the top right and selecting the _Rocketchat_ node. In the Node Editor, enter your Rocket.Chat credentials. Here’s some detailed [information](https://docs.n8n.io/credentials/rocketchat) on how to create an _User ID_ and _Auth Key_ for the credentials. While creating your personal access tokens, don’t forget to select ‘Ignore (Two Factor Authentication)’ before clicking on the ***Add*** button.

Next, we need to enter the _Channel_. I entered `general`, feel free to enter a channel of your choosing. Now, we can send a picture of the delicious cocktail by clicking on ***Add Attachment*** under Attachments. Click on ***Add Attachment Item*** and select ‘Image URL’. To fill the ***Image URL*** field, select the ***Add Expression*** option. Once you have the editor open, select the following in the variable selector:

`Current Node > Input Data > JSON > image_url`

Don’t forget to activate the workflow by toggling the activate button on the top right. Here’s a GIF of me following the steps mentioned above.

{% youtube 6VYBBC-int4 %}

## Next Steps

You can apply the steps in this walkthrough to build far more powerful use cases than our fun Cocktail Recipe banners. Especially for marketing, e-commerce, and content calendar needs. Below I’ve listed some ways in which this workflow could be expanded — feel free to try these out and drop a comment if you’d like for us to cover them:

- You could design different versions of the banner template, each optimized for their intended delivery channel — like an Instagram Story (9:16) or a Facebook post (1.91:1) and attach them to a new card in a Trello board.
- Use IF nodes in n8n to pass a predefined image to a Bannerbear template. In our Cocktail banner, this could be used to add the correct drinkware icon depending on the glass type of the cocktail (like “Highball” or “Collins”).
- Create a Bannerbear template for a mockup of your SaaS solution and generate variations with your leads’ name, photo and company logo.

![](https://cdn-images-1.medium.com/max/500/1*5NrW7xOke_3xqdPXhA8fwg.gif)

## Conclusion

We’ve created a nifty proof of concept to demonstrate procedurally modifying graphics. A similar setup using the Sketch command-line tool is also possible. But from my experience, this is a much longer process that requires a lot more lines of code.

The biggest takeaway for designers and programmers alike is how simple yet potentially powerful the actual mechanics of this whole workflow are. I am really curious to see what kinds of workflows you cook up with Bannerbear and n8n. What types of use cases do you think would be most valuable? Drop a comment below — I love to discuss use case ideas or get feedback on what you’d like to see next.

In case you’ve run into an issue while following the tutorial, feel free to reach out to me on [LinkedIn](https://www.linkedin.com/in/max-tkacz-696774153/) or ask for help on our [forum](https://community.n8n.io/) 💙

> This [post](https://n8n.io/blog/automate-designs-with-bannerbear-and-n8n/) originally appeared on n8n.io [blog](https://n8n.io/blog/).