Table of Contents
Status
Published
Do not index
Do not index
Words
966
Intro
I started my new newsletter because of the 5-week challenge that I was doing, and called it “5 Stories, 5 Weeks”, which then changed to “#5Weeks Digest”. You can check the archives here.
Initially, this was my setup in managing this newsletter(s).
- Also, every time I wanted to create a new issue, I would:
- Login to Canva
- Open previous template
- Delete old texts, and type new ones
- Save it, and download it
- Add the new banner image to the email draft
- 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:
- Background image?
- If your banner reflects your mood, then yes.
- Otherwise, the background is fixed throughout the course.
- The logo?
- If you’re undecided on the logo, or maybe you’re using some stock images, then yes.
- 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.
- The issue numbering?
- Some people like putting the issue numbers for reference purposes. If you’re one of those people, then yes.
- 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](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Fbdc602a3-9e42-4bcf-9187-2cbf46b9feee%252F1344b316-cd0f-4fa9-b984-0988aa23111b%252Fbe_like_christine.png&optimizer=image&quality=80&width=280)
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](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F49004757-637b-4696-8738-e9af043b2f92%252Fcb1f1d54-6a13-4781-99c9-ce89b1c4545d%252F5Weeks_-_Issue_7_-_Explain.png&optimizer=image&quality=80&width=280)
The tools
- Canva — Create background image and logo/brand
- Stencil — Image generator
- Airtable — Automate the image generation
Setting up the tools
Airtable
Set up the new Airtable table with what you need:
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Fcf88f79c-cef8-462f-808a-7b0a5ff77915%252Fd51f7963-e664-4485-9e9c-88659c36c919%252FAirtable_set_up.png&optimizer=image&quality=80&width=280)
- 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](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Fcf88f79c-cef8-462f-808a-7b0a5ff77915%252Fd51f7963-e664-4485-9e9c-88659c36c919%252FAirtable_set_up.png&optimizer=image&quality=80&width=280)
Stencil
After you signed up, start with 1. Creating a new project
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F88ee47e5-27aa-4c35-a80c-2bce2c6436de%252F7c16875c-2c76-484e-9a3b-63b96c732830%252FCreate_new_project.gif&optimizer=gif&quality=80&width=280)
Then, 2. Create a new template. Choose the size → Twitter (1200x675), name it and save.
This will be your main template.
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F7191a312-197c-4653-ab44-ad685b24ae11%252F62e500f9-4a01-4f23-9603-a8aec1eee966%252FCreate_new_template.gif&optimizer=gif&quality=80&width=280)
3. Add Static Image as background → adjust the size to cover all white spaces
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Fbca54ee1-efd0-4d14-bf13-ced12a3157cd%252F0153da05-929d-4cb6-aa75-214d4d8c6b90%252FAdd_image_as_background.gif&optimizer=gif&quality=80&width=280)
3a. Add Text as header → select font, colour & size → name it as “Newsletter”
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Ffc86cb65-efb4-40e4-9c38-893f1136f300%252Fe4647aa6-d16c-455f-b921-d668eb032db2%252FAdd_header_text_as_newsletter.gif&optimizer=gif&quality=80&width=280)
3b. Add Text → select font, colour & size → name it as “Issue”
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Fbe3067db-c494-437c-b98b-50e583eadf9e%252F5b8d1599-49b4-49f5-a98e-8ed60b92207d%252FAdd_text_as_issue.gif&optimizer=gif&quality=80&width=280)
3c. Add Text → select font, colour & size → name it as “Topic”
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Ff6241736-9d0e-48b6-b6a2-aaf40efb0756%252F8a5429f4-5f90-4111-bd3b-fbdef6fd0a52%252FAdd_text_as_topic.gif&optimizer=gif&quality=80&width=280)
Stencil to Airtable integration
4. Add new Airtable integration. From the template, click Console → Integration → Airtable → Add now
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F16264f87-9f85-4da9-ae70-dd263efb5c51%252F1be74c7a-3405-4cd9-83fb-25ec17b5d242%252FAirtable_integration.gif&optimizer=gif&quality=80&width=280)
4a. Copy Airtable API key from https://airtable.com/account
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F4dc099a4-9a48-416c-95a1-46e17020521d%252F9348ffa0-fe3e-465e-b238-5e6ff9885c90%252FAirtable_API_key.png&optimizer=image&quality=80&width=280)
4b. Paste the API key
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F2c5d62a4-7ca0-4e6b-94a4-c84a44dedfb0%252F0e356e7b-df56-47b5-84ed-2d114da0eb9b%252FPaste_Airtable_API_key.gif&optimizer=gif&quality=80&width=280)
4c. Back to integration
- View Templates → Console → Integration → Airtable → New Action
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F2fa98d88-2545-4404-aa04-57d1499290a8%252F4602c752-1399-43d6-95bb-7a0210f6e25d%252FBack_to_Airtable_integration.gif&optimizer=gif&quality=80&width=280)
4d. Get your Base ID from Airtable → Help → API Documentation
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Ffdb9b439-0669-4f9a-81c5-c36cbcfb542b%252F695d2cc7-5d2b-44f4-bd0e-b6edc24d0d52%252FGet_Base_ID_from_Airtable.png&optimizer=image&quality=80&width=280)
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F93430e0b-4794-4693-af41-fdb17f719843%252F933debf7-cb80-41e9-9248-7b31216a63df%252FCopy_Base_ID.png&optimizer=image&quality=80&width=280)
4e. Go back to the New Action page, and fill up as below.
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F51996d9e-0ff7-4fa4-a5f6-127d342d59c5%252Fb4a05772-904d-4c57-a50c-634dae948954%252FAdd_Base_ID.png&optimizer=image&quality=80&width=280)
The test result should be like this.
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F40a2ec8e-f90a-4467-984a-ccdf2448d736%252Fc043f1b6-fbe4-4c65-8827-7571d87a1ddb%252FTest_connection_result.png&optimizer=image&quality=80&width=280)
4f. Map inputs as per [2. Set up Airtable] and choose your preferred file type, JPEG or PNG or both.
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F3e7bf901-3e73-4dce-be02-97f63ecca99a%252F3b063d09-748a-45c5-b967-8373269ebf25%252FMap_inputs.gif&optimizer=gif&quality=80&width=280)
4g. Test the integration. But before that, let’s create a new data in Airtable.
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Ffdf6f946-59f6-4d2e-bc40-e0cfa9547b1e%252F2fca17a0-27e1-4211-a69a-ee9c292044c6%252FBefore_test_demo.png&optimizer=image&quality=80&width=280)
5. Demo — The moment of truth!
- At the Console, click Run Action
- Go to Airtable and see the banner appears under “Image”
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F758e6bc6-ca38-4214-855d-22e3b1b555e4%252Fffea5099-5a7f-4f39-bf6c-96aad2603420%252FTest_demo.gif&optimizer=gif&quality=80&width=280)
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](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F1af5db6f-48b3-4499-b4fc-dc8485e209c5%252Fd74738ab-0066-4c47-b3d4-b93c8a9a7a18%252FAdd_Status_field.gif&optimizer=gif&quality=80&width=280)
6b. Add new data
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Fb18c83aa-1f65-4aa8-a94b-48a8a7ed5b52%252F504fc0a4-f096-4fd9-816e-77dcc9a0c8d4%252FAdd_new_data_to_test_trigger.gif&optimizer=gif&quality=80&width=280)
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](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F24ac07f0-ecec-4752-88f9-f3ca90d06e6c%252F6a2537d8-0497-4469-8ce8-f28300d7f785%252FCreate_new_automation.gif&optimizer=gif&quality=80&width=280)
6d. Add trigger:
- Choose “When a record matches conditions”
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Feaaf80b3-7ca9-49c8-bd2a-3c384e52d636%252Fc842ad88-f90f-4ff1-90b6-a50a9986d055%252FWhen_record_matches_conditions.png&optimizer=image&quality=80&width=280)
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Fe291be16-d736-442e-8d27-f0d011983cd0%252F351b348c-a1d7-4f99-ae59-90b6a3025ab2%252FAdd_Trigger.gif&optimizer=gif&quality=80&width=280)
6e. Add Actions to run script
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Fa33d962e-02dc-4b5d-a303-dd4f6d7d0951%252F1f706a1e-c795-4986-8225-d64103865884%252FAdd_Run_Script_as_action.png&optimizer=image&quality=80&width=280)
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F1afc8343-cd9c-40b3-8a6e-6b796a06804e%252F598d6368-2ea5-4bf4-bb14-5d6366f6aa5b%252FAdd_Actions.gif&optimizer=gif&quality=80&width=280)
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](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F18e1fc1a-8342-447e-b766-9f286591a548%252F00c808c5-d654-4b33-bf96-24e998a013dd%252FGet_Project_API_Key_1.png&optimizer=image&quality=80&width=280)
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Fea0fad13-4b1e-4cac-9c19-5e1af57c8356%252Fe4700112-a856-45ae-a267-e4bc838a978f%252FGet_Project_API_Key_2.png&optimizer=image&quality=80&width=280)
6h. And, get the Endpoint
- Projects → Templates → Console → Integrations → Airtable
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Fe893cf14-3930-45a0-8daa-c8b016e95331%252Fd8bd7028-a896-48f8-a5ae-f0b7e943a7a8%252FGet_Endpoint_1.png&optimizer=image&quality=80&width=280)
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F9ca43047-9472-47f7-8c6f-fd8eb1dc9882%252F3ab0524d-ab84-4011-9ae3-3bbbada77e53%252FGet_Endpoint_2.png&optimizer=image&quality=80&width=280)
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F588a80f3-ff43-4921-9cd7-b736c4fac470%252Fe010c537-cbb6-4934-a968-86534d7bfc60%252FGet_Endpoint_3.png&optimizer=image&quality=80&width=280)
6i. Script test
- Once the script is ready, let’s do a script test.
- You should get a “✅ Test ran successfully”
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F46e7ae80-e0d1-4f89-80ed-de2f30d88115%252F5041fbdf-c75c-4e0a-b985-529569425d35%252FTest_the_script.gif&optimizer=gif&quality=80&width=280)
That’s done. Let’s run the final test!
Don’t forget to enable automation, before testing.
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2Fbb747dd8-0853-485d-97b0-8969bc1e92b1%252F004cff3a-60ea-4628-87ec-8bd62d684ca0%252FFinal_test!.gif&optimizer=gif&quality=80&width=280)
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy%2Fblock%2F6c84d76e-1065-42e7-8be6-7b6c6faa5c41%252Fb11f96ce-c88d-4104-8827-f7af089046dc%252FFinal_test_result.png&optimizer=image&quality=80&width=280)
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 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.
P/s Do you like the Airtable Wiz banner? Guess how I did it?😉
Cheers,
Leif🧙🏼♂️