
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?


Creating leaderboard or ranking images can be a repetitive and time-consuming job. You need to find or create a template, add the data, and then export the image. And then repeat on different occasions. Or even worse, create such an image manually every time. If you create many leaderboard images, it can be a tedious task. 

In this tutorial, we will show you how to automate the process of creating leaderboard and ranking images using RenderForm template editor and a simple spreadsheet. With that information, you will be able to create a new leaderboard image in just a few seconds!

## Create leaderboard image template

First, we need to **create a template** for our leaderboard or ranking image. For that, log in to RenderForm and create a template of your choice.

The canvas editor will give you all the options that you can use in your leaderboard image template. Add background, player names, photos, and their score or even star rating!

![Leaderboard template created in RenderForm](/blog/leaderboard-template.png)

When creating a template, name the elements of your image so that you can easily identify them later. For example, you can name the player's name as `player_name` and the player's score as `player_score` instead of `text_1`, `text_2`, etc.  

Save your template and that's all, you won't have to create the same image manually never again. Now, you are ready for automatic image generation!

## Generate new leaderboard image from a template

When your template is ready, now you can easily generate an image with different data. It will take just a few seconds!

Go to **Image Preview**, which shows the image and all elements that can be edited. It is a sort of form which you can use to quickly generate new images from your template.
Next, edit the template elements in the form. Simply replace the default text, e.g., `player_1_text` with the real player name, `Jon Snow`. Proceed with the rest of the elements and add the data for all the players.

![Leaderboard image preview](/blog/leaderboard-image-preview.png)

Once you added all the data, click **Render Now** at the bottom of the list. The image will be generated instantly, and you can see how the new data looks like in your template.

![Leaderboard rendered image from preview](/blog/leaderboard-image-preview-rendered.png)

And that's all, you can now **download the image or share it with your team**. To do that:
- right-click on the rendered image and use the *Save image* option
- use **Copy as browser link** option under the Render now button. This option will generate a link for your image and let you use it online!

## Generate multiple images with spreadsheet

If you need to create **multiple leaderboard or ranking images with different data at once**, then you can use the Spreadsheet automation. It allows you to generate multiple images at once with a few simple steps. 

### Create a spreadsheet with data

Our leaderboard template is ready, so now, we just need to create a spreadsheet with the data we want to display in it.

In the header row of your Spreadsheet, add the **names of the columns** that match the IDs of the elements in the template and their property type. You can copy all the names from the template preview.

For example, in my template I will use `player_1_text.text` where `player_1_text` is the ID of the text element and `.text` is the property of the element that we want to change.

![Spreadsheet with data](/blog/leaderboard-spreadsheet.png)

For a better overview, you can add a column with the image name (`_name`). This will be the **name of the image file** that will be generated.

In the next rows, add the data you want to display in the leaderboard images, so the players' names, photos, and scores. You can add as many rows as you want, each row will be a separate leaderboard image.

> Check out our [video tutorial about image automation using spreadsheet](https://www.youtube.com/watch?v=5jy9xteruno).

### Automate the image generation

Now, go to **Plugins** in RenderForm and choose **Spreadsheet** automation. There, choose the template you created to use it as a base for the leaderboard images.

![Spreadsheet automation plugin](/blog/plugins-spreadsheet.png)

Then, click on **Import** and pick the XLSX file with the data. Once it is loaded, you will see the preview of the images that will be generated with the data from your spreadsheet. In this step, you can check and confirm if everything is correct.

![Preview of auto-generated images](/blog/leaderboard-imported-spreadheet.png)

Finally, click on **Render** and wait for the images to be generated. Once they are ready, you can download them as a zip file with **Download** button.

![Ready to use ranking images with player details and scores](/blog/leaderboard-images.png)

## Conclusion

In this tutorial, we showed you how to automate the process of creating leaderboard or ranking images. With just a few clicks you can generate a new image from your template or multiple images with different data using a simple spreadsheet. Automate your workflow with image generation and save time for more important tasks!

Leaderboard and ranking image automation with RenderForm


Being consistent with blog post featured images can be a challenging task. Creating and uploading images for every blog post can take a lot of time unless you use a predefined template and image automation tools.

RenderForm offers a WordPress plugin that automatically generates a featured image for any post or page on your site. It's simple to use, and you can generate high-quality images with just a few clicks.

## Create your template

To get started, create your image template in RenderForm. You will use it as a template for featured images throughout your WordPress posts and pages.

I created a simple image template with 3 components: main text, overlay and image. They will be changing for different posts. Main text will show the post title and image present the post character in the background.

Let's name our main text as `title` and image as `image`. This is just a template, so the actual text and image are not relevant here, but make sure you name each element correctly. You will need to identify the components while generating new images with different values.

![RenderForm: sample image template](/blog/wordpress/wordpress-featured-photo-template.png)

[Learn more about creating great blog post covers.](/blog/posts/tips-for-great-blog-post-covers/)

## Install RenderForm plugin

Once your template is ready, it is time to set up the image automation in WordPress. 

First, [download the plugin](/blog/wordpress/wordpress-plugin.zip).
Next, go to **Plugins** section in WordPress admin and **Add new**. Finally, choose the downloaded .zip on **Upload plugin**, and install the plugin.

![RenderForm plugin installation in WordPress](/blog/wordpress/install-wordpress-plugin.gif)

Activate the plugin and then the installation process in completed.

Next, you need you add your **API Key** to the plugin settings. You will find it in your RenderForm account under your profile or in template details.

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

Paste your API key into RenderForm plugin settings and save it. You can find this option in **Settings / RenderForm**.

![RenderForm plugin setting](/blog/wordpress/wordpress-api-key-settings.png)

## Render image in WordPress

Now it is time to render an image for your blog post. Open a blog post that you want to create an image for, and in **Post** section on the right side, scroll down to see RenderForm plugin.

Follow the steps below to generate a featured image for your blog.

1. From the list of RenderForm templates, select the template you want to use in your blog post.
2. In Changes, choose elements that you would like to replace. Select properties like our `title.text` and enter new text as value. The same with `image.src` that will replace the image with URL value.

![RenderForm image properties](/blog/wordpress/wordpress-properties-featured-photo-sidebar.png)

3. Click **render image** to see the results. **Use as featured image** will apply the image as main post image. 

![RenderForm rendered image](/blog/wordpress/wordpress-rendered-featured-photo-sidebar.png)

Publish your post to see your beautiful, hassle-free automatically generated image.

![RenderForm rendered image preview](/blog/wordpress/wordpress-rendered-featured-photo-preview.png)


## Automate your image generation

With RenderForm plugin created specifically for WordPress, you can generate beautiful images for your blog post covers. Create consistent, template-based images in your page style without time-consuming manual tasks.

Have fun with our image generation tool and create beautiful cover images for your WordPress site. [Get started for free](/register) and automate your image generation for blog post and more with RenderForm.


Featured photos for WordPress blogs


[Integrately](https://integrately.com/) is a no-code integration platform that allows you to automate your workflows, similarly to Zapier and Make.com. You can connect your apps and services, and create workflows that will automate your tasks. You can also create your own apps and services, and share them with other users.

In the following article, we will show you how to use Tally and Integrately to generate images. But you can replace Tally with any other service from app directory.

## Prepare a Tally form

Tally is a no-code form builder that allows you to create forms and collect data. You can use Tally to create a form that will be used to generate images.
For this example, we created a form that will allow users to enter hotel name, price, rating, distance and availability date. 
We will also add a file upload field that will allow users to upload the hotel image.

![Sample Tally form](/blog/integrately/tally.png)

## Prepare a RenderForm template

In this example, we will use one of a public RenderForm template named 'Hotel card'. You can find all public templates [here](/console/templates/).

![Hotel card](/blog/integrately/image-template.png)

The selected template comes with a set of properties to change. You can use these variables to populate the template with data from your form. You can edit or add your own components to the template 
using Template Editor.

![Template properties](/blog/integrately/template-properties.png)

## Connect RenderForm via Integrately

In Integrately, start with selecting your trigger of your choice and as a second app choose '**RenderForm**' in and select '**Create image in RenderForm**' action. 

![Render image with Integrately](/blog/integrately/apps-selector.png)

Next, put **Template Identifier** to **Template** input, you can find it in '**Preview**' -> '**Template Details**' tab in RenderForm. 
In **Changes** section, put values for the selected template properties. In this example, we used values from Tally form created previously.  

![Integrately configuration](/blog/integrately/integrately-configuration.png)

List of template properties you can find in '**Preview**' -> '**Form Editor**' tab in a template preview window. 

![Get template properties for image rendering](/blog/integrately/template-properties.png)

Now, you can enable automation and test it!

### Create image from Tally submission

Now you can fill the Tally form and submit it. You will see the image has been rendered and saved in your RenderForm account.

![Rendered image in RenderForm](/blog/integrately/my-requests.png)

And voilà! We are done!

![Rendered Hotel Card](/blog/integrately/rendered-image-background.jpg)

You can try to create other workflows and enhance them with batch image generation with RenderForm. Sky is the limit, use your imagination to attract more customers or increase satisfaction level with image personalization.


Image Generation with Integrately


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


[Zapier](https://zapier.com/) is a popular platform for no-code automations for different type of workflows. It gives you an ability to orchestrate and automate many tedious tasks like sending out e-mails on some event. Zapier offers many options that can help you work more efficiently and effectively with simple workflows' automation.

Zapier offers [multiple apps and integrations](https://zapier.com/apps) that you can use to automate your workflow. It's a perfect solution for marketing automations and other repetitive task that can simply be done automatically and save your time. One of such tasks can be automatic image generation.


<ZapierPlugin/>



## Quick Start: Create custom image with Zapier

Search for 'RenderForm' in Zapier app directory and choose 'Create Image' action.
Choose your template and in 'Changes' section put properties which would you like to change.

![Render image with Zapier](/blog/zapier/render-image-with-zapier.png)

List of template properties you can check in **Form Editor** tab in a template **Preview** window.
To open **Form Editor** tab, click **Preview** button on your template and switch tab to **Form Editor** on the top.

![Get template properties for image rendering](/blog/zapier/get-image-properties-for-image-rendering.png)

See [the list of all template properties](/docs/general/template-properties/).

## How can I use image automation?

If you are creating multiple similar images manually, then image automation will be your lifesaver. Instead of creating and changing the image every time you need to save it or send it in an email, you can simply create a template and generate images with different content automatically. 

How does it work? You will see an example below with RenderForm image template and Zapier automation. The general idea is to **automatically replace selected elements from your image with new content**. Imagine that instead of re-creating the same image, you can personalize it automatically by, for example, filling up a short form or adding data to Excel. We will work on that example below.


## Image automation with Zapier

Zapier is a great choice for image automation. The setup is intuitive, and it requires no codding nor specific knowledge. There are only 3 steps here: add trigger event in Zapier, create image template, and setting up the automation. Are you ready to try it now?

### Event trigger

We will start with creating a trigger event in Zapier. This event will trigger an action of generating an image. It can be anything, a new lead, new email received, scheduled meeting, new ticket, request. Anything you can think of.

![Create event with Tally](/blog/zapier-trigger-event.jpeg)

Let's create a new Zap. Our trigger event will be a **new form submission from [Tally](http://tally.so)**. To connect your Tally account with Zapier, simply search in on the list in trigger block, log in and select the form you want to use. Confirm and allow Zapier to test the trigger to make sure it can retreive all data correctly. The whole trigger setup will take max 1 minute.

**How will it work?** I created a simple Tally form, where I fill all data I need to create a hotel offer for my client. In the form, I enter hotel details, trip dates, price, etc.; so everything I want to send in the offer.

![Tally form](/blog/make-tally-form.jpeg)

### Create image template

Now it's time to create our image template in RenderForm. One element in your image template, for example text, is one component that can be editable via Zapier automation.

I created different components like `price`, `title` or `availability`, and I will be replacing those elements automatically when there is a new form submitted on Tally.

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

Using Zapier automation, I will be generating a new image replacing details like price, hotel name or hotel image with details from the Tally form submission.

### Action - Create image

The last step is to **add RenderForm image generation to Zapier**. We will use *Create image* action, meaning that we want to generate a new image when trigger event is called.

Search for RenderForm in action block in Zapier and select the action type. Log in to your account and add your API Key (you can find it in [your account](https://renderform.io/console/api-keys/) section in RenderForm).

![Add RenderForm event in Zapier](/blog/zapier-renderform-apikey.jpeg)

When it is done, we need to configure the process of image generation, **define what and how elements should be replaced** when there is a new form submission on Tally. Those are called *Changes* in Zapier.

There are two things we are setting up:

- **RenderForm component** - on the left side, we need to type the component name (we set it in RenderForm template) and the component type after a dot. For example, `price.text` which means that we will be replacing *price* component which is of type `text`.
- **Tally form element** - on the right side, we select from which Tally form element we will take data to replace the image component.

![Set up RenderForm image generation](/blog/zapier-renderform-setup.jpeg)

### Run automation to generate image

And the automation is ready! Save the Zap and let Zapier test it for you. As a result, you will see an **image generated from a recently submitted form**. Try submitting another form with different data and check how RenderForm generates a new image for you automatically.

![Image generated automatically](/blog/make-renderform-image.jpg)

And voilà! We are done! Remember to **turn on your Zap to make it work and listen for new submissions from Tally**.
Preparing the whole Zap took **less than 5 minutes**. This is really a great strength of no-code automations and tools like Zapier!

You can try to create other Zaps and enhance them with batch image generation with RenderForm. Sky is the limit, use your imagination to attract more customers or increase satisfaction level with image personalization.


## Resources

- [List of template properties](/docs/general/template-properties/)
- [Documentation: Dynamic og:images](/docs/general/dynamic-og-images/)
- [Zapier](https://www.zapier.com)


Image Generation with Zapier



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)


Image Generation with Airtable Script


Google Sheets is a web-based online spreadsheet editor with multiple options and customization features that help you automate your workflow. Using simple scripts, we can add external automations to your Google Sheet spreadsheet, which is a great option to improve your data management. 

Today, I will show you how to **automate image generation using Google Sheet spreadsheet and a custom image generation script**.

## Create image template

Before we start with Google Sheets script 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 Google Sheets automation.

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

## Step 1: Add Google Apps script

In Google Sheets, open 'Extensions' menu in the top and click 'Apps Script' option. 

![Open Google Sheets extension](/blog/google-sheets/open-apps-script.png)

Google Sheets will redirect you to a script editor in a new window.

### Script for image generation.

Copy and paste the script below into the script editor.

```javascript
function onOpen() {
  var spreadsheet = SpreadsheetApp.getActive();
  var menuItems = [
    { name: 'Render images...', functionName: 'generateImages' }
  ];
  spreadsheet.addMenu('RenderForm', menuItems);
}

String.prototype.addQuery = function(obj) {
  return this + Object.keys(obj).reduce(function(p, e, i) {
    return p + (i == 0 ? "?" : "&") +
      (Array.isArray(obj[e]) ? obj[e].reduce(function(str, f, j) {
        return str + e + "=" + encodeURIComponent(f) + (j != obj[e].length - 1 ? "&" : "")
      },"") : e + "=" + encodeURIComponent(obj[e]));
  },"");
}


function generateImages() {
  var apiKey = Browser.inputBox('RenderForm API Key', 'Please enter the RenderForm API Key', Browser.Buttons.OK);
  try {
    checkApiKey(apiKey);
  } catch (e) {
    Browser.msgBox("Incorrect API Key", "Please check again if your API Key is valid.", Browser.Buttons.OK);
    return;
  }


  try {
    var sheet = SpreadsheetApp.getActiveSheet();
    var sheetData = sheet.getDataRange().getValues();
    var renderFormElements = [];
    var renderFormUrlIndex = sheetData[0].indexOf('rf.image_url');

    if (renderFormUrlIndex === -1) {
      Browser.msgBox("Missing output column", "Please add column named 'rf.image_url' in order to get image results.", Browser.Buttons.OK);
      return;
    }


    var template = Browser.inputBox('RenderForm Template', 'Please enter the RenderForm Template Identifier', Browser.Buttons.OK);

    var firstRow = sheetData[0];
    for (var columnIndex = 0; columnIndex < firstRow.length; columnIndex++) {
      var columnName = sheetData[0][columnIndex];
      var isRenderFormColumn = columnName.startsWith("rf.");
      var isRenderFormImageUrlColumn = columnName === "rf.image_url";
      if (isRenderFormColumn && !isRenderFormImageUrlColumn) {
        var renderFormElement = {
          columnIndex: columnIndex,
          name: columnName
        };
        renderFormElements.push(renderFormElement);
      }
    }
  } catch (e) {
    Browser.msgBox("Invalid spreadsheet", "Please check again your spreadsheet column.", Browser.Buttons.OK);
    return;
  }

  Browser.msgBox("Rendering is starting", "Images render will take a while, please do not edit spreadsheet until the script finish.", Browser.Buttons.OK);
  for (var rowIndex = 1; rowIndex < sheetData.length; rowIndex++) {
    try {
      var row = sheetData[rowIndex];
      var requestParams = {
        apiKey,
        output: "json",
      };

      for (var element of renderFormElements) {
        var columnIndex = element.columnIndex;
        var name = element.name;
        var value = row[columnIndex];
        var property = name.replace("rf.", "");
        requestParams[property] = value;
      }

      var renderFormUrlCell = sheet.getRange(rowIndex + 1, renderFormUrlIndex + 1);
      renderFormUrlCell.setValue("Loading...");
      var imageUrl = renderImage(template, requestParams)
      console.log("Rendered:", imageUrl);
      renderFormUrlCell.setValue(imageUrl);
    } catch (e) {
      if (renderFormUrlCell) {
        renderFormUrlCell.setValue("Error: " + e);
      }
    }
  }
  Browser.msgBox("Completed", "RenderForm finished rendering your images.", Browser.Buttons.OK);
}



function checkApiKey(apiKey) {

  var request = {
    'method': 'get',
    'contentType': 'application/json; charset=utf-8',
    'headers': {
      'x-api-key': apiKey
    }
  };

  var response = UrlFetchApp.fetch('https://get.renderform.io/api/v1/organization', request);
  var json = response.getContentText();
  var responseBody = JSON.parse(json);
  return responseBody.name;
}

function renderImage(templateId, requestParams) {
  var baseUrl = "https://get.renderform.io/img/";
  var requestUrl = (baseUrl + templateId).addQuery(requestParams);
  var response = UrlFetchApp.fetch(requestUrl);
  var json = response.getContentText();
  var responseBody = JSON.parse(json);
  return responseBody.href;

}
```

![Paste image generation script to Google Apps](/blog/google-sheets/paste-image-generation-google-script.png)

After pasting the code above you click 'Run' and follow the Google instructions which may appear.

## Step 2: Configure your data

Let's go back to the tab with your data in Google Sheets. Create a new column in your spreadsheet called `rf.image_url`. RenderForm will generate image URLs basing on your data, and put the links there.

The script will retrieve data from columns that start with `rf.` prefix, and it will replate them in selected components while generating images. 

Column names must also contain image component and its property, e.g.: 

| Template Editor Component ID | Component Type | Google Sheets 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       |

![Google sheets for Image Generation](/blog/google-sheets/image-generation-data.png)

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

## Step 3: Run your script

Once your data is ready, you can **start the script**! Click 'RenderForm' and click 'Render images...'.

![Start image rendegin in Google Sheets](/blog/google-sheets/start-rendering.png)

RenderForm script will ask you for your **API Key and Template Identifier**. 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.

![Start image generation in Google Sheets](/blog/google-sheets/put-api-key.png)

Thereafter, the script will start generating images and put the image links to the `rf.image_url` column. This process may take a while, please do not edit the spreadsheet until the script finish.

![Generated images in Google Sheets](/blog/google-sheets/rendered-images.png)


Image Generation with Google Sheets


[Make.com](https://www.make.com/) (formerly Integromat) is a popular automation platform that can improve your workflows by automatizing them. One central hub that connects all apps helps in controlling all workflows and makes the automation simple and intuitive. 

Make offers many [apps that you can easily integrate](https://www.make.com/en/integrations) in your workflow automation, like Google apps, Facebook, Mailchimp, Shopify, Etsy, Buffer, Tally and much, much more. RenderForm is one of them, so you can use it in Make workflow to automatize your email or marketing campaigns with automatic, personalized images that will stand out!

## Image automation with Make

You can use Make to automatize your workflow and connect multiple apps into one process. There are three simple steps to generate automated images: add trigger event, then create an image template in RenderForm, and set up automation in Make.com. Ready to try it?

### Trigger event - Tally form

Here, you can create any **event that will trigger the action of generating an image**. It can be a new sign-up to your app, new product in your store, a change in your Airtable spreadsheet, new scheduled meeting in your Calendly calendar or submitted form on Google or Tally. Anything you can imagine and think of that you use in your workflow.

![Create trigger event with Tally](/blog/make-trigger-action-l.jpeg)

I created a workflow that starts from **trigger which is form submission on Tally**.

**What is the idea?** I created a simple Tally form, where I fill all data I need to create a hotel offer for my client. In the form, I enter hotel details, trip dates, price, etc.; so everything I want to send in the offer. 

![Tally form](/blog/make-tally-form.jpeg)

Next, when I submit the form, I would like to email the client and include personalized images of hotels from my offer. The automatic images will be generated using RenderForm template.

### Create image template

Now, **create your image template in RenderForm editor**. One element in your image template is one component that can be editable via Make automation.

I created different **components** like `price`, `title` or `availability`, and I will be replacing those elements automatically when there is a new form submitted on Tally.

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

For example, using my Tally's form I will be replacing the title (hotel name), hotel image and price elements.

### Action - generate image

The last step of the configuration is to **set up RenderForm module** in Make and **map the elements between Tally form and RenderForm template**.

Search for RenderForm integration in “Make” and click on Add button to connect it with your RenderForm account. You will find your API key in your [account section](https://renderform.io/console/api-keys/) in RenderForm.

![Add RenderForm event in Make](/blog/make-renderform-apikey.jpeg)

Then, we need to **configure the actual image generation**. First, select the template you want to use for this automation. In my case, it's “Hotel card” from the previous step. Next, in *Changes*, we will insert responses from Tally form into RenderForm template.

- **Template Property** - here you put [template property](/docs/general/template-properties/) from RenderForm template
- **Value** - here you select the form element from Tally

![Set up RenderForm image generation](/blog/make-renderform-setup-l.jpeg)

In the example above, I created different items for each element I wish to replace. So, for `price` component from RenderForm image template, which is of type `text`, I assign a field from Tally form which appears as `1. Fields: Price`. Whatever price (or other text) I enter into that field in Tally form, it will replace the default *price* component in my template.

### Run automation to generate image

Now, the automation is ready. **When I submit the form, RenderForm will generate the image** basing on the information from Tally. You can see that the image has different title, price, image and dates from the original template.

![Image generated automatically](/blog/make-renderform-image.jpg)

**Imagine creating multiple images like that, using a simple form!**

I can download the image or send it directly to the client through the automation in Make.com, by adding the next step to the workflow. Sounds simple, doesn't it?

## Use cases for automated image generation

Automatic image generation works great in personalized marketing campaigns and helps in creating multiple images with different content, basing on templates. What are the use cases for automated image generation?

- generating multiple images with dynamic content that you can easily download or use on your website
- [personalized images for email campaigns](/blog/posts/personalized-emails-mailchimp/)
- image hosting for your automated images
- blog post covers – if you struggle with keeping your blog post covers nice and clean, and most of all coherent, using RenderForm can help significantly. Simply create a template in the editor and [generate all images automatically with a simple Excel list](blog/posts/how-to-create-many-images-from-spreadsheet/) of your blog posts.

**Try RenderForm for free** and check how it can help you improve your image generation with automation options and simple image editor!


Image Generation with Make.com


In this blog post I will present you how to quickly generate many images for an online session, video course or a conference.
I will use [RenderForm](/) to create a template, load data from a spreadsheet and generate images.

## Create a template

I used a predefined template from 'Templates' tab and adjusted it to my needs. RenderForm offers a great number of templates in many categories.
You can also create your own templates from scratch with an easy-to-use template editor.

In this blog post I will modify texts in two places and change the image (you can see component names on the left side panel).
 - `author_photo` - author image on the right side,
 - `author_name` - author name under the image,
 - `title` - session title.

![template in canvas editor for marketing automation](/blog/template-in-canvas-editor.png)


## Create a spreadsheet

I created a spreadsheet in Numbers, which is a default spreadsheet app for macOS, but you can use Excel or any other spreadsheet program.

In the first row, I put component names with properties I wanted to change, and separated them with a dot.

Property is a variable of component that you want to modify, for example, text, source url, background color or opacity.
Check our docs for more details about [components and their properties](/docs/general/template-properties/). Here is my sample spreadsheet:

- `author_photo.src` - change image source of `author_photo` component,
- `author_name.text` - change `text` of `author_name` component,
- `title.text` - change `text` of `title` component.

![data in spreadsheet](/blog/data-in-spreadsheet.png)

## Generate images

Now, head to the 'Extensions' tab in RenderForm and open 'Spreadsheet' extension. Import created spreadsheet using 'Import from file' button,
and select the template you want to use on left side.

![RenderForm extensions](/blog/bannerly-extensions.png)

If all properties are loaded properly in your file (they must correspond to your selected template), you are ready to start a generation.
To start generating images click 'Generate' button on top of the list, and do not close the window until the generation process is completed.


![list with generated images in spreadsheet extension](/blog/list-with-generated-images.png)

Once the generation is done, you will be able to download the images using 'Download' button.

![generated images from template for marketing automation](/blog/generated-images.png)

With 'Spreadsheet' extension you are able to quickly generate multiple images with one template and customized content.
With image generation and simple image editor, you can create images, post covers or marketing brochures, that match your company, website or app unique style!

<Vimeo/>


How to create many images from a spreadsheet?


Integromat is a platform for creating connections between different applications in no-code style, where achieving
a business goal is the top priority. Integromat offers a free plan, so it makes it a great option for testing its capabilities.
[Integromat application library](https://www.integromat.com/en/integrations/) is growing every day, you will find there all popular application like Google Drive apps, Facebook Ads, Shopify, Telegram, Instagram, e-mail connectors, and more, much, much more!

Let's create a simple scenario! We will create an Integromat flow where we will watch on new customers in Shopify, then we will generate a personalized image using the customer name and e-mail them with our auto-generated, personalized image.

Whole scenario looks like this, we created 4 modules:

- Shopify - watch new customers
- RenderForm - generate an image with customer name
- HTTP - download the image
- E-mail - send the e-mail

![Shopify: Send email to a new customer](/docs/integromat/example-scenario-personalized-customer-image-with-shopify.png)

In RenderForm, I created a simple image with 4 components. The most important one is the text component with 'Hey Joanna!' greeting. It has 'greeting' ID, which we will use in the following steps.

![RenderForm: example image template](/docs/integromat/example-thanks-for-order.png)

Next, in RenderForm Integromat module I configured a new connection using API Key. The API key can be found in your RenderForm account in your [account section](/console/api-keys/).
I selected my template and added Changes to replace 'Hey Joanna' text with a greeting with customer name.

![Integromat: image generation module](/docs/integromat/bannerly-module-configuration.png)

The HTTP module will download the generated image with customer name. This step is required by the e-mail module.

![Integromat: download image from URL](/docs/integromat/integromat-http-module-get-a-file.png)

I configured e-mail module with my e-mail mailbox, you can put there an e-mail subject line and e-mail message. In the last field, I added an attachment with the image which I downloaded in the previous step.

![Integromat: add image attachment](/docs/integromat/e-mail-add-attachment.png)

We are done! Now, every time you get a new customer in your Shopify store, they will receive a personalized e-mail message. This will definitely make your store much more unique than others. You can use RenderForm to create much more sophisticated marketing campaigns. For example, you could generate a QR code with promo link or create a template with most popular items in your shop and send it to your customers. Possibilities are unlimited! 

Have fun with our image generation tool and if you experience any problem or need help with automatizing your workflow, we are here to help.

## Resources

- [List of template properties](/docs/general/template-properties/)
- [Make.com](https://make.com)


Image Generation with Integromat


Benefits of personalizing email content are that they are more likely to be opened by recipients, recipients are 
more likely to read them in full, and they are often shared with other people - because they show up as more personal emails.
Personalized e-mails are not new, but it is time to take those personalized e-mails to the next level. 
One of the newest technologies that can be used for this purpose is image generation. In this article
I will show you how to send an e-mail with personalized image to your customer once he makes some action
in your application or website. I will use [Make.com (Integromat)](https://make.com) to take advantage from no-code automations.


## Create Integromat webhook

I started from creating a scenario in Integromat and adding a webhook module. The module generates an unique 
webhook URL where I can send my requests from server or from frontend application. The CORS won't be a problem here because 
Integromat accepts requests from frontend applications.

![Integromat webhook configuration](/blog/integromat-webhook-configuration.png)


## Send request on click

Let's go to the code part! I started from creating a simple `<a href=""/>` tag in my React application. 
It looks pretty standard I added `href` attribute with link to some article and custom `onClick` method.

[comment]: <> (![Send request from ReactJS application to Integromat with axios]&#40;/blog/send-personalized-email-image-on-click.png&#41;)

```tsx
<a href="https://renderform.io/blog/posts/multi-language-image-variants/"
   target="_blank"
   onClick={onLearnMoreClick}
   className="btn btn-link d-flex align-items-baseline">
    <span>Learn how to quickly generate multi-language images</span>
    <i className="far fa-arrow-right ml-2"/>
</a>
```

The `onLearnMoreClick` method will be invoked once somebody clicks the link. The `onLearnMoreClick` will send a 
POST request to endpoint generated by Make.com (Integromat). I used [axios](https://github.com/axios/axios) but you can use
any other library to do this. If you don't want to use any library check [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).

```tsx
const onLearnMoreClick = () => {
axios("https://hook.integromat.com/your-webook-url",
  {
    method: "POST",
    data: {
      firstName: account.firstName,
      email: account.email
    }
  });
}
```




We are passing two values which we will need in next steps:
- `firstName` - user first name,
- `email` - user e-mail to send him personalized e-mail.

## Edit image template

I used existing template from RenderForm template library. However, if you want, you can create 
your own template using template editor in RenderForm. 
We will edit the top component with 'Hey Jakub!'
text, and we use Integromat to replace the text for every webhook request.

![Example template for coupon code and image generation](/blog/personalized-image-template.png)

## Configure Integromat scenario

Below you see a whole Integromat scenario where I connected everything together. The scenario is self-explanatory, we have 4 modules:
- Webhooks module - receive requests from application 
- RenderForm - generate image based on data from request
- HTTP - download the image from RenderForm
- Email - send e-mail to a customer

![Integromat scenario with image generation and SMTP](/blog/integromat-personalized-image-flow.png)

![Add text to image using RenderForm module](/blog/add-changes-bannerly.png)

HTTP module is only for downloading image from received URL from RenderForm module. 
![Download generated image with text using HTTP Integromat module](/blog/http-module-download-image.png)

Thanks to the HTTP module we can add the image itself instead just the URL. 
![Send attachment using Integromat email module](/blog/e-mail-module-add-attachment.png)



## Test 

Click **'Run once'** button in created Integromat scenario and then click link to open the article from which we created
in the first section. Now the request from our frontend application should be sent Integromat Webhook module, after that
data will be passed to RenderForm module where a new image will be generated. RenderForm will take your template
and replace title on the image and return a link with ready to download image. Next, HTTP module will download
the image generated by RenderForm module and add it as an attachment in the last step. In E-mail module we composed a simple 
e-mail message which we sent to the user who clicked the link! 


![example email with personalized image](/blog/example-email-with-personalized-image.png)

Presented Integromat scenario is just a simple example what you can do with batch image generation. Possibilities are
unlimited! Your flows can be much more complex, you could generate an image for every occasion with RenderForm, for example
you could add user avatar to make it more engaging. Image that your customer gets a personalized image with his name and
profile image! Have fun with RenderForm! 


Zapier

Make.com

Integrately

WordPress Plugin

Mailchimp

Airtable Extension

Google Sheets

Excel/CSV file

REST API

RenderForm CLI

Webhooks

HTML to Image

No code