Apr 15, 2022
How To Automate Image Generation Using Airtable Button
Learn how to utilize Airtable Button field to call Stencil image generation API. Simple and easy setup guaranteed.
Shulhi Sapli
Founder
In our previous tutorial, we learned how to automate image generation using built-in Airtable integration right from Stencil.
Read it here if you like to know more,
Do you also know that you're not only limited to use the integration to pull data from Airtable. In fact, you can use our simple API and Airtable Button field to trigger image generation. In this tutorial, we will do just that.
Although this step requires writing some code, it is not hard as you can simply copy the code we provided and it should work out of the box.
What is Airtable Button?
For those who are not familiar with Airtable, Airtable has an interesting field type called a button where you can assign cells in a specific column to act as a button.
Button field
Generating Image
Generating image with this button requires calling Stencil's API. We can assign the button to run our script to read the values from relevant columns, send the request to Stencil and once the image is generated we can populate specified column with the generated image.
Let's do this one by one.
As usual, before we start we need to have a specific template that we want to use in Stencil. We will use the same template from the previous Airtable tutorial mentioned above.
1. Create button and output column
In your Airtable, simply add a new column with Button type. We will assign our action here to call image generation API in Stencil.
When you create the Button field, select Run script.
Then create another attachment column to hold the generated image output.
2. Paste script to read Airtable data and call Stencil image generation API
You should be able to edit your scrip nowt. Simply copy the following script. In order for this script to work with your template, you only need these three things changed.
API key can be found in project's setting
API Key - Find this in your project's setting
Template ID
Modifications - Change it to fit your template
JAVASCRIPT const API_KEY = "YOUR_PROJECT_API_KEY"
let table = base.getTable(cursor.activeTableId)
let record = await input.recordAsync('Select a record', table)
var data = {
"template": "YOUR_TEMPLATE_ID",
"modifications": [
{
"name": "title",
"text": record.getCellValueAsString('Title')
},
{
"name": "frame_7",
"src": record.getCellValue('Image')[0].url
}
]
}
// Generate image using our synchronous API
let response = await fetch('https://api.usestencil.com/v1/images/sync', {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${API_KEY}`
}
})
let json = await response.json()
// Update Output column with our image
await table.updateRecordAsync(record.id, {
Output: [{ url: json.image_url }]
})
A synchronous image generation API is used here.
If you're not sure how your modifications should look like, simply go to your template's console. The console page shows all the available modifications for your specific template.
Test API console shows all the relevant modifications for your template
3. Run your script
All you have to do now is run your script by clicking on the button for the record that you want the image to be generated.
Image will be populated automatically to your Output field.
GIF showing the image generation process
Airtable: Built-in integration vs Button
We recommend using built-in integration whenever possible because it is easier to use without the need to write any code.
If you need to do everything inside Airtable, then using Airtable Button to call Stencil image generation API is the way to go. The only downside to this is that it only generates image per record instead of bulk image generation for the whole table.
In the next tutorial, you'll see how you can use our recent Airtable integration's API to bulk generate images just like the built-in integration right from Airtable.