Table of Contents

1. Overview

2. Prepare Image Template

3. Get API Key

4. Generate Image Variations

1. Overview

On this page, you will learn how to create an image template in DynaPictures and use REST API to generate image variations for this template. 

 

2. Prepare Image Template

In this section, we will create an image template containing a twitter banner with a bubble, quote text and an authors info.

Sign in to DynaPictures, go to "Image Templates" on the left and click on "New Image Template" button.

 

New image template will be created and the template editor page will be opened. Now you can edit template name, change size and add new layers. All changes are automatically saved when you make them. See the annotations on the image below:

We need to change the template size so that it's square and has the correct resolution. Select "Square (1200x1200)" option in the dropdown next to the template's name.

Now let us add the following layers needed for the banner:

a) Background image

Click on the image icon in the toolbar. Resize the image element so that it fits the entire container. Click on the "Upload" button in the image element and upload an image that will be used as a background. 

Change the layer name to "background" in the layer settings panel on the right. It's the "Layer Name" field at the bottom of the settings area. This name can be used later in REST API calls to customize the layer in generated images.

b) Quote Text

Click on the text icon in the toolbar and position the quote text area by dragging and resizing it. Select background color in the settings panel and set the transparency (the A field in the RGBA row) level to 63. The padding must be set to 40, the border radius to 30 and the layer name to "quote_text".

 

 

c) Author Avatar

Click on the image icon in the toolbar and then resize and position the image element for the author avatar. Set the border color to #FFFFFF and the A field for transperency to 58. Border radius can be set to 102 or some other value, depending on the size of the image element, so that it becomes round. Set the layer name to the "avatar"

 

d) Author Name

Click on the text icon in the toolbar and then resize and position the text element next to the avatar. You can keep autoresizing option for the text size in the settings panel, or set the font size manually. Depending on the color of your background image, you may change the color of the text as well. Set hte layer name to the "auhtor"

e) Author Username

Click on the text icon in the toolbar and resize and position the created text element next the avatar and below the author's name. Adjust the font size and the color if needed. Set the layer name to "username".

The image template is ready now and you can go to "API Console" at the top and see the sample REST request made to the desings endpoint. This sample request contains test data for every layer in the template, so that you can see what can be customized. In the next section we will make such REST request on our own.

3. Get API Key

Before you start using the DynaPictures REST API, you need an API key. The API key is a unique identifier that authenticates requests associated with your account for usage and billing purposes. To get an API key, click on your name in the upper right corner and go to the Account page. You will see an API Key section where you can copy your key.

 

4. Generate Image Variations

Now we can start generating image variations via REST API. You can use your favourite programming language, command line or tool like Postman or Insomnia. We will need an ID of the template that will be used to generate images. You can get it in the upper left corner on the template page:

 

Here are the details of the request that we are going to make:

Endpoint URL  https://api.dynapictures.com/designs/{template_id}
Request Method  POST
Header "Authorization"  Bearer {API_KEY}
Header "Content-Type"  application/json
Request Body  JSON Document with layer settings

We define the specific settings for the image template in the request body, so that DynaPicture knows how to customize the template and generate an image variation. For example, here is a sample JSON document with customizations for the canvas background color, quote text, author name and username. 

 {
  "params": [
    {
      "name": "canvas",
      "backgroundColor": "#fff"
    },    
    {
      "name": "author",
      "text": "Tony Stark"
    },
    {
      "name": "username",
      "text": "@ironman"      
    },
    {
      "name": "quote_text",
      "text": "Everything is going to work out exactly the way it’s supposed to."
    },
    {
      "name": "avatar",
      "imageUrl": "https://dynapictures.com/images/banners/cat1.jpeg"
    }
  ]
}

As you can see, we specify the name of the layer in the "name" attribute of the parameter object, and then set other attributes like "text" for the text content of the text element or "imageUrl" for the image element. See API Reference for more details.

Finally, let us make a REST request and generate an image now. We will use command line in this example. Please make sure you replace the MY_API_KEY and MY_TEMPLATE_ID with your actual values:

 curl -d '{"params":[{"name": "canvas","backgroundColor": "#fff"},{"name": "author","text": "Tony Stark"},{"name": "username","text": "@ironman"},{"name": "quote_text","text": "Everything is going to work out exactly the way it’s supposed to."},{"name": "avatar","imageUrl": "https://dynapictures.com/images/banners/cat1.jpeg"}]}' -H "Authorization: Bearer MY_API_KEY"  -H "Content-Type: application/json"  -X POST https://api.dynapictures.com/designs/MY_TEMPLATE_ID

 

The following response document is returned synchronously, once the image is generated:

{
  "id": "6b14925848",
  "templateId": "77cecff580",
  "imageUrl": "https://api.dynapictures.com/images/ff01d10f8d/6b14925848.png",
  "thumbnailUrl": "https://api.dynapictures.com/images/ff01d10f8d/6b14925848-thumb.png",
  "retinaThumbnailUrl": "https://api.dynapictures.com/images/ff01d10f8d/6b14925848-thumb-2x.png",
  "metadata": null,
  "width": 1200,
  "height": 1200
}

 

Congratulations! We generated our first image variation and can download it by opening the URL provided in the "imageUrl" field: