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,

• How To Use Airtable To Automate Image Generation For Building Visual Marketing Assets

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.

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.

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.

1. API Key - Find this in your project's setting
2. Template ID
3. Modifications - Change it to fit your template

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.

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.

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.

Ready to dive in? Sign up for our free trial at https://www.usestencil.com and get 50 images free!