Create banner with Stencil & Airtable

Intro

I started my new newsletter because of the 5-week challenge that I was doing, and called it “”, which then changed to “”. You can check the archives .
Initially, this was my setup in managing this newsletter(s).
  • Draft the issues on Notion, then copy and paste it to Loops.
  • Also, every time I wanted to create a new issue, I would:
      1. Login to Canva
      1. Open previous template
      1. Delete old texts, and type new ones
      1. Save it, and download it
      1. Add the new banner image to the email draft
      1. Repeat step 1.
It was OK for the first few times, but it became a boring chore.
My solution?
  • Create a template and automate them, so I don’t have to log in into Canva, Figma or any other graphics tools any more.
I’m going to share my personal “recipe” here.
Are you ready? Let’s GO!💃🏻

But first, let’s plan the design.

Decide what you want to edit, every time.
Will it be:
  1. Background image?
      • If your banner reflects your mood, then yes.
      • Otherwise, the background is fixed throughout the course.
  1. The logo?
      • If you’re undecided on the logo, or maybe you’re using some stock images, then yes.
  1. The title of your newsletter?
      • I’ve learned that I might want to change my title, which happens quite frequently. So, you might want to consider this too.
  1. The issue numbering?
      • Some people like putting the issue numbers for reference purposes. If you’re one of those people, then yes.
  1. The topic?
      • Just like the numbering, this is also optional. Some people just put the topic at the email subject like Christine here. Be like Christine!😘

        • notion image
So, basically in my case, it looks like this. I only want to focus on the newsletter name, issue number and the topic of that particular issue.

notion image

The tools

  • Canva — Create background image and logo/brand
  • Airtable — Automate the image generation

Setting up the tools

Airtable

Set up the new Airtable table with what you need:
  • Name (Default as reference)
  • Newsletter → The name of the newsletter
  • Issue → Issue numbering
  • Topic → Topic or subject of the issue
  • Image (Attachment) → This is where the banner appears, magically 🎩

notion image

Stencil

After you signed up, start with 1. Creating a new project

notion image
 
Then, 2. Create a new template. Choose the size → Twitter (1200x675), name it and save.
This will be your main template.

notion image
 
3. Add Static Image as background → adjust the size to cover all white spaces

notion image
 
3a. Add Text as header → select font, colour & size → name it as “Newsletter”

notion image
 
3b. Add Text → select font, colour & size → name it as “Issue”

notion image
 
3c. Add Text → select font, colour & size → name it as “Topic”

notion image

Stencil to Airtable integration

4. Add new Airtable integration. From the template, click Console → Integration → Airtable → Add now

notion image
 
4a. Copy Airtable API key from

notion image
 
4b. Paste the API key

notion image
 
4c. Back to integration
  • View Templates → Console → Integration → Airtable → New Action

notion image
 
4d. Get your Base ID from Airtable → Help → API Documentation

notion image

notion image
 
4e. Go back to the New Action page, and fill up as below.

notion image

The test result should be like this.

notion image
 
4f. Map inputs as per [2. Set up Airtable] and choose your preferred file type, JPEG or PNG or both.

notion image
 
4g. Test the integration. But before that, let’s create a new data in Airtable.

notion image
 
5. Demo — The moment of truth!
  • At the Console, click Run Action
  • Go to Airtable and see the banner appears under “Image”

notion image

Bonus: Airtable Automations

Before anything else, we need to add a “Status” field to our table.
6a. Add the “Status” field to the base
  • Create — Execute script to generate new image
  • Done — This is to remind us, the image has been created.

notion image
 
6b. Add new data

notion image
 
6c. Create new automation. Click on the Automations tab, next to Data at the top left.
  • Go down to “Create Automation”, name it, and press Enter to save

notion image
 
6d. Add trigger:
  • Choose “When a record matches conditions”

notion image

notion image
 
6e. Add Actions to run script

notion image

notion image
 
6f. Copy this script and paste it inside

The Script:

// From Project settings
const API_KEY = "xxx"
// It starts with "https://api.usestencil.com/v1/airtables/..."
const ENDPOINT = "xxx"
// Generate image using our synchronous API
await fetch(ENDPOINT, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${API_KEY}`
  }
})

6g. Here’s how to get the Project API Key

notion image

notion image
 
6h. And, get the Endpoint
  • Projects → Templates → Console → Integrations → Airtable

notion image

notion image

notion image
 
6i. Script test
  • Once the script is ready, let’s do a script test.
  • You should get a “✅ Test ran successfully”

notion image
 

That’s done. Let’s run the final test!

Don’t forget to enable automation, before testing.

notion image
 
notion image

Done! Try it out yourself.

You can download the Airtable template for free.
There are a few more automations you can add to this.
  • Change the status from “Create” to “Done”,
  • and, send the banner to your team via email, every time a new banner is created.
If this is something that interests you, read below.

Outro

I rediscovered my love for Airtable while working on my #5Weeks challenge.
I decided to work on a new project that showcasing my discoveries from working on solutions for communities and startups.
Even my own projects like No Code Asia, Community Builder Kit, and a lot more private ones.

Introducing Airtable Wiz, indie hacking your way with Airtable.

Every week, you’ll get a bite size guide working towards a bigger goal. Like this one.
Why smaller parts? Because most of us are side-hustlers. We only work on side projects whenever we’re free. So, if you can spare at least 30 mins a week, this is for you.

👉🏻Sign up for the waitlist to become the first early bird🐦👈🏻

Those who subscribed to my #5Weeks Digest will automatically be added.🤜🏼🤛🏼
I definitely want to make money out of this, but for now, it’s FREE!
Hope to see you there.

P/S Do you like the Airtable Wiz banner? Guess how I did it?😉
 
Cheers,
Leif🧙🏼‍♂️
 

0 comments