
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?


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.

## 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)


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.

## 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)


Zapier

Make.com

Integrately

WordPress Plugin

Mailchimp

Airtable Extension

Google Sheets

Excel/CSV file

REST API

RenderForm CLI

Webhooks

HTML to Image

Airtable

How to generate multiple images with different texts?

Image Generation with Airtable Extension

Image Generation with Airtable Script