
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 [Bannerly](/) 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. Bannerly 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/components/). 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 Bannerly and open 'Spreadsheet' extension. Import created spreadsheet using 'Import from file' button, 
and select the template you want to use on left side. 

![bannerly 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!

<div style="padding:54.11% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/690975131?h=5def0aa786&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="how-image-generation-works"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>


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 applications,
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 a new customers in Shopify,
then we will generate a personalized image using customer name and send the e-mail!

Whole scenario looks like this, we created 4 modules. 

- Shopify - watch new customers
- Bannerly - 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)


I created a simple image with 4 components. The most important one is the text component with 'Hey Joanna!' greeting. It has 'greeting' id, this 
will be important in the following steps.

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

In Bannerly module I configured a new connection using API Key. The API key can be found in your Bannerly account in your [account section](/console/api-keys/).
I selected my template and added on change in order to replace 'Hey Joanna' text with the greeting with a customer name. 

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

HTTP module will download the generated image with customer name. This step is required by 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 a e-mail subject line, e-mail message and in the
last field add an attachment with the image which I downloaded.
![Integromat: add image attachment](/docs/integromat/e-mail-add-attachment.png)

We are done! Now, everytime you get a new customer in your Shopify store, he will get a personalized 
e-mail message. This will definitely make your store much more unique than others. You can use Bannerly 
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 customer! Possibilities are unlimited, 
have fun with our image generation tool! If you have any problem, we are here to help.

## Resources

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


Image Generation with Integromat


Zapier is a popular platform for no-code automations. It gives you an ability to orchestrate and automate many tedious tasks like
sending out e-mails on some event. One of them can be an image generation.

Let's prepare a simple Zap! We will create a Zap which will wait for new submissions from 
TypeForm, then we will generate a personalized image and send it with e-mail. Below you can see
how the whole Zap should look like. 

![Send e-mail with personalized image after filling TypeForm](/docs/zapier/example-zap-in-zapier-with-typeform-email-and-image-generation.png)

It contains only 3 blocks:

- TypeForm (trigger) - watches new submissions,
- Bannerly (action) - generates an image,
- E-mail (action) - sends the image to a user.

I created a simple form in TypeForm with 2 slides: e-mail and short input for a first name.
![Simple TypeForm with e-mail and user first name](/docs/zapier/example-type-form.png)

Next, I prepared a nice template using one of existing templates in Bannerly. We will use the top component with text 'Hey Jakub'
to put there a custom text in Zapier. 
![Simple Image Generation Template with personalized greeting](/docs/zapier/thanks-for-joining-personalized-image.png)

The whole configuration of Bannerly Action is super simple. I selected my template which I created, then I put 
the ID of the text component and property which I want to change. In this case it will look like this `name.text`. The `name`
 is Component ID and `text` is the property. As a value I put text 
'Hey ' + name from type form and '!'. 
![Bannerly Action module configuration in Zapier](/docs/zapier/image-generation-action-configuration-in-zapier.png)

The last Action is responsible for delivering our image to the user. We will need an e-mail from user from TypeForm 
and image URL from Bannerly. In the attachment field I simply put the URL which I received from Bannerly Action. Zapier will
automatically convert it into a file so user will see the image instead of URL.

![Send file from Bannerly using e-mail in Zapier](/docs/zapier/send-file-in-e-mail-action-in-zapier.png)

And voilà! We are done! Remember to turn on your Zap in order to make it work and listen for a new submissions from TypeForm.
Preparing a whole Zap took me 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 Bannerly. Sky is the limit, use your imagination
in order to attract more customers or increase satisfaction level with image personalization.



## Resources

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


Image Generation with Zapier



Image generation is a technique of automated or semi-automated images creation. Creating a complete and eye-catching image with API from scratch could be a challenging task.
Great graphic designers usually don't know how to code, so they use visual editors like Photoshop, Sketch or Bannerly to create their drafts and mockup. 
Image generation software uses templates created by graphic designers and API just replaces properties like texts, colors or images to 
meet the final requirements.

## Step 1: Create a template

Add components and design your template in our [Template Editor](/docs/general/template-editor/).

![Online Editor for Image Generation](/blog/simple-online-design-editor.png)

Check every added component on canvas.

### Set image fit
Click on image and on the right side adjust image fit option. Set image fit to `cover` if it can be cropped on sides in order to fill whole space, or use `contain` option if the image must be showed without cropping. 
The contain option is useful when you add logos or brand visuals.

### Adjust text box
By default, Bannerly will scale down your text if it will be bigger than blue rectangle. 
You can set width and height of a text box to make sure your text can freely grow.

![Text alignment](/blog/text-component-alignment.jpg)

### Adjust text alignment 
Click on text and on the right side scroll down to 'Alignment' section. 
You can decide how the text will grow if it will be bigger than used placeholder on draft.  

## Step 2: Automate and scale

Now, you are ready replicate your template with different texts, images and more!
No matter which integration you will choose, the general rule of thumb is that you need to know which component you want to update and what property.
![Layout plus Data equals your image](/blog/image-generation-api.jpg)


General format of change looks as follows: 

`YOUR_COMPONENT_ID.PROPERTY=YOUR_VALUE`

Example:

`myNameComponent.text=This is my name`


Check [list of properties](/docs/general/components/) which you can edit with any integration.


![Example of generated image from Image Generation API](/blog/example-of-generated-image-from-image-generation-api.jpg)



What is Image Generation?


## How it started?

I realized how much time I spent to creating blog post covers, and I realized that publishing a blog posts is blocked very often because of lack a proper blog post cover. 
Not every team member of my team has access to the designer tools or a knowledge how to use them. 
Not everyone has a Content Management System to take care of everything. 😄 Even if you are using one you are still just relying on an image to represent your content.

## What is Bannerly.io?

**Bannerly.io is a web-based design editor with automation features.** You can create an image for your social media, blog post cover or advertising banner.

![Online Editor for Image Generation](/blog/simple-online-design-editor.png)

But the greatest feature of Bannerly is that you can **connect it with other online tools** in order to replicate your
image and create thousands of unique images with different images, texts and more!

![Layout plus Data equals your image](/blog/image-generation-api.jpg)

Bannerly offers easy to use **integrations with no-code platforms** like [Zapier](https://zapier.com) and [Integromat](https://integromat.com).

![no-code automation for image generation](/blog/no-code-banner-automation.png)

But you can use Bannerly with Google Sheets, Microsoft Excel, Apple Numbers, [Rows.com](https://rows.com), [Airtable](https://airtable.com) and more!

![generate images with text in Google Sheets](/blog/generate-unique-images-with-google-sheets.png)


## Use cases

- marketing automation
- automatic social images generation
- better email personalization
- multi-language blog posts image generation
- QR code sticker generation
- post card generation
- ecommerce product previews
- Instagram images generation
- archive blog post images generation

## Where to start?

Everything starts from [creating a free account](/register/). Next steps depend on that what you want to do, in Bannerly dashboard you will find
automation guide which will help you with integrating next tools.



What is Bannerly?


Images are not just pretty pieces of decoration. In today's social media world, they are a crucial part of any successful marketing campaign. Posts with pictures receive [650% higher engagement](https://www.bynder.com/en/blog/brand-marketing-infographic/) than plain text, with Instagram scoring the highest in terms of user engagement. 

You can use several methods to boost your social media engagement with images. Find out the best of them inside this post!

## How to Use Images That "Stand Out" and Get Noticed on Social Media

Visuals are powerful. The right image can cause the viewer to take the desired action, whether it is to buy a product, sign up for a service, or even just like your post on Facebook.
Social media is now flooded with images and video content, so are search engines. 

![social media blog image](/blog/social-image-blog-post.jpg)

With visual content being more popular than ever before, you should know how to use it effectively. When it comes to selecting an image for your brand, many factors can affect if it's successful. Your company's culture is the best place to start, as this will help you understand what type of images will work best.

Below are a few ways you can use images to drive engagement and conversions:

### 1. Edit your photos
It’s no longer enough to post some generic picture from google search (it’s also illegal in many cases, remember about copyright laws!). To boost your [Facebook comments engagement by 104%](https://blog.hubspot.com/blog/tabid/6307/bid/33800/Photos-on-Facebook-Generate-53-More-Likes-Than-the-Average-Post-NEW-DATA.aspx) and get 94% more views than an average post with no pictures, you need some great visuals. Use filters, add eye-catching colors, play around with it, and find out which method will work best for your content!
 
![social media image post](/blog/image-editor.jpg)

### 2. Use images that include text
Text is a great communication tool online, but it can be difficult for some consumers to decipher what is being communicated with just words alone. Adding appropriate images that include text can help increase the reader's understanding of the content while also increasing their level of engagement with your post or page.
 

![social media image post](/blog/social-image-10-tips.jpg)

### 3. Use relevant pictures
Using relevant pictures in your posts or pages is a great way to make your posts or pages more engaging and interesting. It is also an easy way to tell your readers about the topic of your article without having to do any extra work.

![social image instagram](/blog/social-media-image.jpg)

As you can see, it’s all about matching the right image with the purpose of your post. The right image can boost your email opening rate, Facebook post engagement, and make you sell more of your product on Instagram. 

## Images and Blog Content— How to Use Them Together?

If you or your company runs a blog, you might need a few tips on how to boost engagement on it. While the information that you’re sharing is the most important, images can be of great help in drawing people in. How to use them effectively?

Remember that header images are the first thing that visitors see when they land on your blog. The whole purpose of header images is to grab the visitor's attention and make them want to scroll down to read more about your blog post.

![blog post cover image](/blog/tips-for-creating-great-post-covers.png)

Here are some **exclusive header image design tips** that will help you increase your blog content engagement rate.

- Make sure that your **header image size** is at least 1200 pixels wide or taller
- Make sure that the header image is in **landscape** mode, not square
- Keep in mind what **kind of post** you are writing when designing a header image
- **Headers with text** work best for informative posts, **headers with visuals** work best for posts with lists or product reviews, and **headers with abstract artwork** best for posts with quotes or videos. 

Check our [tips for great blog post covers](https://bannerly.io/blog/posts/tips-for-great-blog-post-covers/) and see how [Bannerly](https://bannerly.io/) can help you creating proffessional images for you social media, blog posts, emails or online shop!


How to Boost Your Social Media Engagement with Images


Have you ever wondering if you could quickly take a screenshot of a webpage using just a single request?

Bannerly API allows you to not only create images using templates and API but also take a screenshots using REST API.

There are plenty use cases of that:
- Post it on social media
- Make a list of websites
- Detect branding based on colors
- Test or health-check your webpage
- Read texts from screen


## How to take a screenshot with API?

Generate your API key in Bannerly by signing up to the system. Get the API key from your account section and then you can make a request like below.

```shell
curl 
    --location 
    --request POST 'https://api.bannerly.io/api/v1/screenshots' \
    --header 'X-API-KEY: <API_KEY>' \
    --header 'Content-Type: application/json' \
    --data-raw '{
        "url": "https://bannerly.io"
        "width": 1366,
        "height": 768,
    }'
```

Bannerly API will respond after a couple of seconds with link where you can download the screenshot. Example successful response is shown below.

```json
{
  "requestId": "ed39c85ac41f4c54b95e4caaad4ebff8",
  "href": "https://cdn.bannerly.io/.../image.png",
  "request": {
    "width": 1366,
    "height": 768,
    "url": "https://bannerly.io"
  }
}
```

## Screenshot API parameters

As you seen above we passed `url` of the website, `width` and `height` of the screenshot. These parameters are required but you can add more options:

- `url` (required) - website URL of which Bannerly should take a screenshot
- `height` (required) - screenshot height
- `width` (required) - screenshot width,
- `expires` (optional) - add expiration time in seconds for the image, available values from `1` to `604800`
- `waitTime` (optional) - add wait time in milliseconds before taking a screenshot, available values from `500` to `5000`
- `webhookUrl` (optional) - send response to the given webhookUrl as POST request

## Does it integrate with other tools?

Yes! Bannerly is integrated with Zapier and Make.com (Integromat). Soon we will add more integrations like n8n.io. Please also notice that 
every request supports a webhook. Taking a screenshot takes time because it's very resource demanding and complex process for servers.
You can pass a URL in `webhookUrl` field, thanks to that Bannerly API will accept your request and immediately
 return you a response. Once Bannerly finish processing your request a new request will be sent to the given URL in `webhookUrl`. 

## Can I set an expiration date?

Yes, you can set expiration date on every screenshot from 1 second up to 7 days. Add a field `expires` and put there
an expiration value in seconds. Bannerly API return you a link in `href` field which will be valid for requested period of time.


Taking screenshots using REST API


Leading a global company or a business which sells around the world is a tricky task. Once we set up our multi-language website
using one of the popular solutions we might face the next problem which are images with texts. We cannot easily change the texts, because it requires
vector software, person who know how to use it. It takes time and resources to prepare such images. It also might consume resources if we would like to change some images.
Then the whole process must start from beginning. 

## What are the solutions?

One of the solutions is to keep our images without texts. It's simple as that. This solutions might not always be the best in some use cases.

The second option is to use Web Image Template Editor which offers the option to generate many image variants based on a template.


## How does it work?

Create a template in **Bannerly Designer** by choosing any existing template or start from scratch with white canvas.

![Bannerly Web Image Template Editor](/blog/multi-language-image-editor-template.png)

Once you finish use option to open your template in **Template Studio** to change texts, images and more. Now, you can edit
texts and see how the image will look like in after export.

![Bannerly Template Studio: Variant editor](/blog/how-to-generate-multi-language-images.png)

Use 'Export as PNG' button to save image to your disk.

### Example multi-language images:

![Hello World in English](/blog/english-hello-world.png)
![Hello World in Polish](/blog/polish-witaj-świecie.png)
![Hello World in Russian](/blog/russian-hello-word.png)
![Hello World in Japanese](/blog/japanese-hello-world.png)

Unlike other web designer solutions, images created in Bannerly are very crisp which makes your company look more 
professional. Every image is processed using the advanced techniques to compress the image and to not lose quality. 
We support many image formats which are becoming standards in the 2021, like: WebP, PNG, JPEG XL, progressive JPG.


## What are other advantages? 

Creating images based on templates is great, but it's not the only advantage of Bannerly. Our web designer can also:

- Improve cooperation between designers and technical-experts or copywriters 
- You can ask your designer to create multiple templates just for your brand
- Easy usage for people who are not designer
- Ready to use free templates prepared by Bannerly Team 

## How much does it cost?

**It's basically free.** You can create up-to 3 templates in Bannerly Designer in FREE accounts and generate unlimited number of variants using Template Studio.
If you would like to automate this process and use API, Zapier, Integromat or other automation tool then there is a pricing plan 
which starts from **$9/month (limited launch offer)**. Check [Bannerly pricing](/pricing) page to learn more.



Zapier

Make (Integromat)

Mailchimp

Wordpress

REST API

HTML to Image

Posts tagged with `automation`