
Airtable is a no-code platform for building collaborative apps, customize your workflow, collaborate, and achieve ambitious outcomes. Besides its main feature, which is a spreadsheet-like data management, Airtable offers many integrations and scripts which can help you automate your workflows.

The following article will show you how to automate image generation using Airtable.
Automation of image generation is a great solution when you have to create multiple images with similar content,
based on a template. **Instead of editing each image manually, you can create them automatically in bulk**, with RenderForm and Airtable.

If you know how to code you may also want to use our [Airtable Script to get a full control over image and PDF rendering process](/blog/posts/image-generation-with-airtable/).
Get a sample data set for RenderForm and Airtable to test your image or PDF rendering workflow here: [Airtable Image Generation Data Set](https://airtable.com/app5hKEJ44tNj56PE/shrleyl74FtcanXfd).

## Create image template

Before we start with Airtable configuration, prepare your image template in RenderForm. Remember that one element in your image template, for example text, is one component that can be edited via Airtable automation.

![Create image template in RenderForm](/blog/airtable-extension/renderform-hotel-card.png)

## Step 1: Add Extension

In Airtable, open '**Extensions**' tab in the top-right corner and click '**Add an extension**' button. Search for '**RenderForm**' in the popup, click '**Add**' button and confirm that you want to add a new app to your Airtable base.

![Find Airtable RenderForm extension](/blog/airtable-extension/find-renderform-airtable-extension.png)

You can close the initial full-screen popup window and continue with the configuration.

## Step 2: Configure Airtable extension

After adding the extension, you will need to copy your **API Key** from RenderForm. You can find it in the '[API Keys](https://renderform.io/console/api-keys/)' tab in RenderForm.

![Copy RenderForm API Key](/blog/airtable-extension/renderform-api-key.png)

Click a small cog button, paste your **API Key** and click '**Done**' button.

![Paste image generation script to Airtable](/blog/airtable-extension/renderform-airtable-extension-settings-button.png)


Now, you can choose:
- **Image Template** used for image generation,
- **Table** from which you want to take data,
- **Output Field** where you want to save images.

**Changes** section allows you to choose which fields you want to update in your image template.

![Configured RenderForm extension for Airtable](/blog/airtable-extension/configured-renderform-extension-for-airtable.png)

## Step 3: Run script to generate images

Once you have your data, you can start the script! Click '**Render**' and see how your images are generated! The links to the images will appear in the selected column of your spreadsheet.

![Click render to generate images](/blog/airtable-extension/click-render-to-generate-images-in-airtable.png)

You can now create a '**Gallery**' view to see all generated images in a larger format.

![Airtable Records for Image Generation](/blog/airtable-extension/created-images-in-airtable.png)


## Troubleshooting

If you encounter any issues with the script, you can check the console logs in the script editor. The script logs information about each rendered image, and in case of an error, it will be displayed in the console.
- The most common issue is having not enough credits on your RenderForm account. You can check your credits in the [RenderForm console](https://renderform.io/console/).
- The second most common issue is a wrong API Key. Make sure you copied the correct values from RenderForm.
- Occasionally, the extension may fail due to incorrect data in your table. If you encounter any issues, you can try to exclude field by field to find the problematic one and fix it.


Image Generation with Airtable Extension



Airtable is a popular low-code platform for building collaborative apps, customize your workflow, collaborate, and achieve ambitious outcomes. Besides its main feature, which is a spreadsheet-like data management, Airtable offers many integrations and scripts which can help you automate your workflows.

In the following article, I will show you how to automate image generation using Airtable. Automation of image generation is a great solution when you have to create multiple images with similar content, based on a template. **Instead of editing each image manually, you can create them automatically in bulk**, with RenderForm and Airtable help.

Here you can get a data set used in this tutorial: [Airtable Image Generation Data Set](https://airtable.com/app5hKEJ44tNj56PE/shrleyl74FtcanXfd)
If you know how to code you may also want to use our [Airtable Script to get a full control over image and PDF rendering process](/blog/posts/image-generation-with-airtable/).

## Create image template

Before we start with Airtable configuration, prepare your image template in RenderForm. Remember that one element in your image template, for example text, is one component that can be editable via Airtable automation.

![Create image template in RenderForm](/blog/make-renderform-template-l.jpeg)

## Step 1: Add Airtable script

In Airtable, open 'Apps' tab in the top-right corner and click 'Add an app' button.

![Open Airtable apps tab](/blog/airtable/open-airtable-apps.png)

Search for 'script' in the popup and add new 'Scripting' app.

![Find blank script](/blog/airtable/choose-blank-script.png)

### Script for image generation.

Copy and paste the script below into the script editor.

```javascript
let config = input.config({
    title: 'RenderForm settings',
    description: 'Configure your API Key, Template identifier, an output field for rendered images and your change field columns. The script takes changes from fields that start with "rf." prefix. Field names must also contain component and property, e.g.: "rf.my_text.text", "rf.my_image.src", "rf.my_component.property".',
    items: [
        input.config.text('apiKey', {
            label: "RenderForm: API Key"
        }),
        input.config.text('templateId', {
            label: "RenderForm: Template ID",
            description: "You can override a template for each record with 'rf._template' column with template identifers."
        }),
        input.config.table('selectedTable', {
            label: 'Your table with data'
        }),
        input.config.field('imageUrlField', {
            label: 'Your field where to put rendered Image URLs',
            parentTable: 'selectedTable',
        })
    ]
});

const table = config.selectedTable;
const rootQuery = await table.selectRecordsAsync();
const baseUrl = "https://get.renderform.io/img/";
const apiKey = config.apiKey;
let templateId = config.templateId;

let renderedImagesCount = 0;

for (let record of rootQuery.records) {
    const recordValue = rootQuery.getRecord(record.id);

    let requestParams = {
        apiKey,
        output: "json",
    };
    for (let field of config.selectedTable.fields) {

        if (field.name === "rf._template") {
            const recordTemplateId = recordValue.getCellValue(field.name);
            if (recordTemplateId) {
                templateId = recordTemplateId;
                continue;
            }

        }

        if (field.name.startsWith("rf.")) {
            const value = recordValue.getCellValue(field.name);
            const property = field.name.replace("rf.", "");
            requestParams[property] = value;
        }
    }

    // @ts-ignore
    const params = new URLSearchParams(requestParams).toString();
    const requestUrl = baseUrl + templateId + "?" + params;
    const apiResponse = await fetch(requestUrl);
    const data = await apiResponse.json();
    const imageUrl = data.href;

    if (renderedImagesCount === 3) {
        const userConfirmation = await input.buttonsAsync(
            'We rendered 3 images so far. Please go to RenderForm and confirm that your images are rendered correctly. Click "Stop" to cancel rendering and fix your template or Airtable data or "Continue" to continue images rendering.',
            [
                { label: 'Stop', value: 'stop', variant: 'danger' },
                { label: 'Continue', value: 'continue' },
            ],
        );
        if (userConfirmation === 'stop') {
            break;
        }
    }
    renderedImagesCount++;

    if (!imageUrl) {
        console.error("Error during render.", requestUrl);
        continue;
    }
    console.log("Rendered:", imageUrl);
    await table.updateRecordAsync(record, {
        [config.imageUrlField.name]: imageUrl,
    });
}
```

After pasting the code above, you can close the popup and click 'Finish editing'.

![Finish editing](/blog/airtable/click-finish-editing.png)

Now, you can follow the script configuration.
Add your **RenderForm API Key and Template ID**, select table with your data and choose field where to put rendered image URLs.

![Paste image generation script to Airtable](/blog/airtable/paste-renderform-script.png)

You will find your RenderForm API Key in [your account](https://renderform.io/console/api-keys/) section. Template ID is the identifier on the right panel of your template editor.

## Step 2: Configure your data

The script takes changes for your images from fields that start with `rf.` prefix.
Field names must also contain component name and its property, e.g.:

| Template Editor Component ID | Component Type | Airtable column name |
|------------------------------|----------------|----------------------|
| my_image                     | Image          | rf.my_image.src      |
| my_text                      | Text           | rf.my_text.text      |
| my_rating                    | Rating         | rf.my_rating.value   |
| my_qr_code                   | QR Code        | rf.my_qr_code.value  |

If you use HTML Templates, then you can skip the component part and use only properties, e.g.: `rf.my_property`.

![Airtable Records for Image Generation](/blog/airtable/airtable-records.png)

## Step 3: Run script to generate the image

Once you have your data, you can start the script! Click 'Run' and see how your images are generated! The links to the images will appear in the selected column of your spreadsheet.

![Airtable Records for Image Generation](/blog/airtable/generated-images-in-airtable.jpeg)

## Troubleshooting

If you encounter any issues with the script, you can check the console logs in the script editor. The script logs information about each rendered image, and in case of an error, it will be displayed in the console.
- The most common issue is having not enough credits on your RenderForm account. You can check your credits in the [RenderForm console](https://renderform.io/console/).
- The second most common issue is a wrong API Key. Make sure you copied the correct values from RenderForm.


Image Generation with Airtable Script


Image automation is a great way to save time on repetitive tasks. If you need to create multiple images with different text but the same layout, we have a solution for you. With RenderForm, you can create a template for your image and generate many images with different texts automatically. In this blog post, I will show you how to do it.

It can be a great help for creating images for **real estate offers, car-selling images, images for advertising your business and much more**. It will also help with generating blog post covers in the same style, or creating social media posts.

In this blog post, I will show you an image automation for car selling offers. I will create a template for the image and then generate many images with different texts automatically. Let's get started!

## Your image template

The first step is to create your image template. Open RenderForm or [create an account](/register) if you don't have one yet.

Go to **My Templates** and click on the **Create a new template** option. Then, choose an empty canvas size, e.g., social media cover (you can adjust the template size later).

![My image templates](/blog/my-templates.png)

Now, create the template. It will be a base for your images. My template contains:
- car image,
- text fields for car brand and model with background color,
- smaller text field for car specs,
- bigger color text for the price,
- extra text fields for year of production and the distance driven,
- contact phone number.

![Car selling offer templates](/blog/car-selling-template.png)

> **Tip:** change names of [template components](/docs/general/template-properties/) so you can easily find and identify them during image generation.

All elements that you create in the template can be edited, but in most cases we will to replace just a few of them. In my use case, I will be replacing the car image, all car details' texts, and keep the background color and the phone number the same.

When your template is ready, save it and go to the next step.

## Generate new images from your template

Having a template ready, we can now generate new images from it. First, you can test the image generation using **image preview and form editor**.

In the Form Editor, you can add custom texts for template components, for example, change the price. Once all the data is there, click on **Render now** to see the result.

![Car selling template preview](/blog/car-selling-template-preview.png)

You can use this option to test your template and see how it looks with different texts. It allows you also to save the image, so if you just need one image for the moment, you can do it this way.

> To see the changes instantly, open **Live Preview** option.

## Upload data from file

Now, when you have your template ready, you can generate many images with different texts automatically. To do that, you need to upload a file with data.

First, we need to prepare our data. I will use a spreadsheet with different car details. In the **header row we need to put our template components' names** with their properties, e.g., `model.text`, where `model` is the name of the component and `text` is the property we want to change.

![Car offer data in spreadsheet](/blog/car-selling-spreadsheet.png)

> See our [video tutorial](https://youtu.be/5jy9xteruno) on how to generte images using data from spreadsheet.

Now, we can upload our data to RenderForm. Go to **Plugins** and choose **Spreadsheet** option.

Choose your template from the list and click on **Import** where you can choose your data file. You will see the preview of your data imported from the spreadsheet. If everything is correct, click on **Render** button to generate your images. Give RenderForm a few seconds to do the magic, and your images will be ready to download!

![Car offer image generation from spreadsheet](/blog/car-offer-images.mp4)

## Create an image automation

Another option for creating images in bulk is to use **image automation**. It allows you to create an automation with external services, like Zapier, Make.com or Airtable, that will generate images automatically for you.

For our car selling offer example, we can connect RenderForm to our Airtable database, where we receive all new car offers. There, we can generate images automatically, and save them in Airtable.

### Generate images using Airtable

Find the RenderForm extension in Airtable and enable it by adding your API key. Set up the extension by choosing your template and the column where you want to show your images in Airtable. Map template components to Airtable columns and click on **Render images** to start the image generation.

![Car offer image generation using Airtable database](/blog/car-selling-airtable.mp4)

> See [instructions for Airtable integration](/blog/posts/image-generation-with-airtable-extension/)

### Generate images for new records using Zapier

You can also use Zapier to generate images for new records in Airtable. In this case, Zapier will connect your template and image generation from RenderForm and your database in Airtable.

![Car offer image automation using RenderForm, Zapier and Airtable](/blog/car-selling-zapier.png)

This automation will run RenderForm image generation for every new or updated record in your Airtable sheet. Sounds great, right?

<ZapierPlugin/>

## Conclusion

Make your work easier and much faster with automatic image generation. With just a few steps you can create a template for the images you need to generate, connect it with your data and generate many images with different texts automatically. Try all the powerful features and integrations of RenderForm and save your time now!


How to generate multiple images with different texts?


QR codes are a great way to share information using images. You can use them to share your social media profiles, contact information, your website, or even link to your product.

In this tutorial, I will show you how to generate many images with different QR codes from a template using RenderForm, Airtable and Google Sheets.

## Why use QR codes?

**What are QR codes?** They are a type of matrix barcode (or two-dimensional code) that can be read by a camera. They can be used for storing information such as URLs, phone numbers, text, or even images.

![QR code example](/blog/qr-code-example.png)

QR codes can be easily placed in an image and shared on social media. They are also a great way to share information in a physical space. You can print them on flyers, business cards, banners, posters, or even on your products.

What's important is that **QR codes are easy to scan**. You can use your smartphone camera to scan them and get the information you need. It is a fast and convenient way to share information.

Using RenderForm, you can create many images with different QR codes from a template and use them for your needs. Create unique images that you can use for product stickers, flyers or your social media.

## Create image template with QR code

First, create a template image using the RenderForm template editor and add a QR code as one of the elements. I created a product image with a QR code in the bottom right corner. It will work great for social media posts and marketing materials.

The template consists of four elements: product image, brand name, extra text and a QR code. The QR code will redirect to the product page where users can buy it.

![Image template with QR code](/blog/qr-code-image-template.png)

> Make sure you name the template elements so you can easily identify them later, during the image generation process.

## Generate image with different QR codes

Once you have the template ready, you can generate many images with different QR codes. Start with checking how your template behaves in the live preview. You can change the text and QR code to see how the image will look like.

Go to the **Live preview** tab and change the texts, image and QR code URL. This way you can see how the image will look like with different products. It is also a great way to generate just one image from a template when needed.

![Generate image with live preview](/blog/qr-template-live-preview.mp4)

> **The shorter the link, the better the QR code will look.** If you have a long text, you can use a URL shortener to make it shorter.

## Automate image generation with Airtable or Google Sheets

To generate many images with different QR codes, you can use data from a spreadsheet or Airtable. Thanks to easy upload of your data, you can generate your images in just a few clicks.

First, prepare your data in a spreadsheet or Airtable. Make sure you have a column for each element that you want to change in the template.

![Image template with QR code](/blog/qr-template-spreadsheet.png)

> **Make sure you name the columns the same as the template components** with their properties. This way RenderForm will know which data to use for each element.

### Generate images using a spreadsheet

Once you have the template and all the data ready in the spreadsheet, you can generate your images. Go to **Plugins** and choose **Spreadsheet** automation.

There, pick your image template and import the data from your spreadsheet. Next, click on **Import** and check the data preview. If everything looks good, click on **Render** to generate your images.

![Images with QR codes generated from spreadsheet](/blog/qr-generate-from-spreadsheet.mp4)

### Generate images using Airtable

You can also generate images with different QR codes using Airtable. Prepare your data in Airtable and set up your RenderForm extension ([learn more about RenderForm Airtable extension](/blog/posts/image-generation-with-airtable-extension/)).

You can render images in just a few clicks and see the results instantly in Airtable image view.

![Images with QR codes generated from Airtable](/blog/qr-generate-with-airtable.mp4)

This way you can generate many images with different QR codes without all the manual work.

## Conclusion

If you are still wondering if you should use QR codes, I hope this tutorial will help you decide. QR codes are a great way to share information, and they are very easy and fast to use. They save space by storing a lot of information in a small image.

And instead of creating all the images manually, use RenderForm to generate many images with different QR codes at once from a template. Save time and enjoy the results!


How to generate images with different QR codes?


Real estate banners are a great way to present your offer. You can use them on your website, social media, online ads or printed in your office. They are a great option to present your offer to potential clients.

For real estate agents, it is important to present their offer professionally. Those days, it is not enough to have a good offer, it needs to look good to sell it. To do that, you can display your offer online, use banners and other marketing materials like flyers. RenderForm will help you generate real estate banners and images automatically from a template, so you can focus on selling and not creating images for each of your real estates.

## Your real estate offer image template

A real estate banner is a simple image with a few texts, property images and contact details. It is a great base for showing your properties online or as a flyer, as it will display the most important information and encourage people to contact you. Having consistent, nice looking banners in the same or similar style will help you present your offer to potential clients and show your professionalism.

To automate your real estate banners, first you need to create a template. Log in to RenderForm (or sign up if you don't have an account yet) and create a new project. 

Go to **My Templates** and click on **Create new template** option. You can also use one of our existing banner templates as a base for your project and adjust it to your needs. 

![My image templates](/blog/my-templates.png)

Choose your banner size and start working in the template editor! My real estate banner template contains the following elements:
- title (property name)
- 4 characteristics (number of rooms, area, facilities)
- price
- contact number

![My image templates](/blog/real-estate/real-estate-banner-template.png)

On the left side of the editor, you can see all template elements. Besides the basic information about the property, it has background colors, background rectangles for images and some other decorative elements. You can add more elements to your template, like a logo or a map.

> **Tip 1:** change names of [template components](/docs/general/template-properties/) so you can easily find and identify them during image generation.\
> **Tip 2:** lock elements you don't want to change during image generation. You can do that by clicking on the lock button in the element properties panel.

## Generate new images from your template

Once your template is ready, you can generate new images from it and test how it works with different texts. 

To test your template, go to your template Preview. You can find it directly in the template editor or in My Templates section.

![Image template preview](/blog/my-template-preview.png)

In the preview, you can see how your template looks like with different texts. You can change texts and images in the form editor to check how it works. Simply change the template properties and click on **Render Now**.

![Real estate template preview](/blog/real-estate/real-estate-template-form.png)

It is a great tool if you need to generate just one image, not a whole batch. If you need to generate many images, go to the next section.

## Upload data from file

For creating a batch of real estate banners, you can upload all the data from a spreadsheet and generate images for all records. The image generation will be based on your template.

First, prepare your data in a spreadsheet. You can export a ready to fill spreadsheet template (it will contain all the fields you need) or create your own from scratch. To get your spreadsheet template, go to Plugins, choose the Spreadsheet option and there choose your template. On the right side you will find the option **Get template spreadsheet**.

![Get template spreadsheet](/blog/real-estate/get-template-spreadsheet.png)

Below, you can see a same spreadsheet with data. The key for image generation is to **name the columns the same as the template components** with their properties. For example, if you have a text component with a name `title` and a property `text`, you need to name the column `title.text`. 

![Real estate offer data in spreadsheet](/blog/real-estate/spreadsheet.png)

When you have your data ready, go again to **Plugins** and choose **Spreadsheet** option in RenderForm. There, choose your template and use **Import** button to upload your spreadsheet data.

![Real estate banner generation](/blog/real-estate/real-estate-spreadsheet-generation.mp4)


## Create an image automation

The banners can be generated for you automatically thanks to integration with Zapier and Make.com. Also, you can use your database in Airtable and run the image generation directly from there. Thanks to image generation automation, you can create a batch of images for your real estate offer and use them in your marketing materials.

### Generate images using Airtable

To generate images using Airtable, you need to have a database with your real estate offer data. Make sure that all the information that you want to display in your banners is in your database.

![Airtable database with real estate offers](/blog/real-estate/real-estate-airtable.png)

Then, set up the RenderForm extension in Airtable and run the image generation for your records!

![Airtable running RenderForm extension to generate images](/blog/real-estate/airtable-renderform-extension.mp4)

> Check our instructions for [image generation using Airtable and Renderform](/blog/posts/image-generation-with-airtable-extension/)

### Generate images for new records using Zapier or Make.com

Zapier and Make.com are great tools for automating your workflows. You can use them to generate images for your real estate offer automatically when a new record is added to your database, or when someone fills out a form on your website.

![Sample image generation scenario with Make.com](/blog/real-estate/make-scenario.png)

> Check our guides for automation of image generaion using [Zapier](/blog/posts/image-generation-with-zapier/) and [Make.com](/blog/posts/image-generation-with-make/)

## Conclusion

In the real estate business, it is important to present your offer professionally. Real estate banners are a great way to advertise your offer. Creating them, however, can be time-consuming. With RenderForm, you can automate your real estate banners and generate images for your real estate offer automatically. Get started now and feel free to [contact us](mailto:contact@renderform.io) if you have any doubts!

Zapier

Make.com

Integrately

WordPress Plugin

Mailchimp

Airtable Extension

Google Sheets

Excel/CSV file

HTML Embed

REST API

RenderForm CLI

Webhooks

HTML to Image

Posts with #airtable

Image Generation with Airtable Extension

Image Generation with Airtable Script

How to generate multiple images with different texts?

How to generate images with different QR codes?

How to generate many real estate banners from a template?