How to Generate Images with URL Parameters

Table of Contents

1. Overview of Image Generation with URL Parameters

2. What Is Dynamic Image Generation Using URL?

3. How to Create a Dynamic Image URL

4. Customizable URL Parameters

4. Advanced Image Generation with URL Using API

6. Use Cases for Dynamic Image Generation With URL

7. Security and Best Practice of Image Generation with URL

8. Coming Features

Overview of Image Generation with URL Parameters

Generating dynamic images with URLs has never been easier. With DynaPictures’ image generation, you can use URL parameters to create and personalize visuals in seconds.

This guide will walk you through every step, whether you’re looking to generate images from URLs for banners, automate blog thumbnails, or upload multiple templates for bulk generation.

By the end of this guide, you’ll know how to:

• Automate image generation with tools and integrations.
• Generate custom images using URL parameters.
• Use link parameters to edit templates dynamically.
• Upload files and manage multiple images efficiently.

Before we dive into how to create a dynamic image URL and personalize images, please read about URLs if you are not familiar with this concept yet.

What Is Dynamic Image Generation Using URL?

Dynamic image generation involves creating visuals by modifying templates through parameters in a URL or API request.

With DynaPictures, you can adjust text, colors, backgrounds, and images in real-time.

Benefits of Using URL Parameters to Generate Images:

• Save time by automating repetitive design tasks.
• Generate multiple images at scale for banners, blog visuals, or social media.
• Customize every aspect of your template, from text to uploaded files.

How to Create a Dynamic Image URL

Step 1: Choose your Template and Get the UID

Start by selecting a template in DynaPictures. Open the Template Editor to customize its design, including layers for text, images, and colors.

• Find Your Template UID: The unique identifier (UID) for your template is located in the top-left corner of the editor. You’ll use this UID to generate your image with a link.

With URL parameters you can generate images on the fly just by changing parameters in the image link.

The dynamic image URL is built using the following schema:

 https://api.dynapictures.com/links/{TEMPLATE_UID}.png?params={PARAMS}&metadata={METADATA}

You need to replace {TEMPLATE_UID}, {PARAMS}, and {METADATA} with your own values. Let’s go over each parameter in detail.

Step 2: Add URL Parameters to Customize your Image

To dynamically update your image, specify parameters in the URL. You can learn more about the parameters in our documentation. These parameters allow you to change specific template layers.

The individual elements of the string are represented as a trinity of layer name, parameter name, and parameter value. So we can specify the layer we want to customize the parameters for.
For instance, an image, and then the parameter of this layer, for instance, an imageUrl and then finally we provide the value of the image URL as a last piece.

Parameter Format:

 {LAYER_NAME}---{PARAMETER_NAME}___{PARAMETER_VALUE}

The layer name can be found in the list of layers on the left or in the settings panel of a layer when it’s selected:

Examples:

• To update text in a layer named title:

title---text___Welcome to DynaPictures

• To upload an image for a layer named banner:

banner---imageUrl___https://example.com/banner.png

Combine multiple parameters using the <> separator. Example:

https://api.dynapictures.com/links/{UID}.png?params=title---text___Welcome<>banner---imageUrl___https://example.com/banner.png

Step 3: Test Your Image URL

Copy the generated URL into your browser or tool to preview your customized image. For example:

https://api.dynapictures.com/links/841da84b3c.png?params=title---text___Welcome<>banner---imageUrl___https://example.com/banner.png

For example, if we want to personalize an image URL of the image layer with the image5 name:

 image5---imageUrl___https://dynapictures.com/images/banners/cat1.jpeg

And if we need to personalize the text content of the text layer with the text3 name:

 text3---text___Hello John!

Finally, here is how the final URL will look like if we want to customize both image5 and text3 for the image template with UID e26cd0daf7:

https://api.dynapictures.com/links/e26cd0daf7.png?params=text3---text___Hello John!<>image5---imageUrl___https://dynapictures.com/images/banners/cat1.jpeg

METADATA

Custom information can be saved within the generated image and used in the following processing steps of the image workflow. You can specify it in this optional metadata parameter:

 https://api.dynapictures.com/links/{TEMPLATE_UID}.png?metadata={METADATA}

For example:

 https://api.dynapictures.com/links/e26cd0daf7.png?metadata=John Doe

Customizable URL Parameters

Similar to our REST API, you can pass the following parameters for customization via URL parameters (The parameter name is the second item in the trinity LAYER-PARAM-VALUE):

text	The text to be rendered in the text layer.
color	The color of the text. E.g. #000000, rgb(0,0,0) or rgba(0,0,0,0.5).
backgroundColor	The background color of the layer. E.g. #fff, rgb(255,255,255) or rgba(0,0,0,0.5).
borderColor	The border color of the layer. E.g. #000000, rgb(0,0,0) or rgba(0,0,0,0.5). When defining this field, it’s a good idea to specify a borderWidth property as well
borderWidth	The border width of the layer. E.g. 1px.
borderRadius	The border radius of the layer. E.g. 5px or 50%.
imageUrl	The image to be used when rendering an image layer.
opacity	Floating-point number representing the transperency of the layer. The 0 makes a layer fully transparent and the 1 leaves it as is.
chartColor	The color of the chart. E.g. #000000, rgb(0,0,0) or rgba(0,0,0,0.5).
chartLabelColor	The color of the chart labels on the X and Y axis. E.g. #000000, rgb(0,0,0) or rgba(0,0,0,0.5).
chartDataLabels	List of labels to be shown on the X axis. E.g. ['2021-01-01', '2021-02-01', '2021-03-01', '2021-04-01']. The values are in the datetime format and also can be provided in the form like 11 Feb 2017 GMT, 9 October 2019 07:37:30 UTC or 2020-04-01 10:35.
chartDataValues	Data series of the chart. E.g. [8.1, 13.57, 15.75, 17.1].

Find extended guidance and information on APIs in our documentation.

Advanced Image Generation with URL Using API

For more advanced use cases, you can generate images programmatically via the DynaPictures Image Generation API. This method provides additional flexibility for automating bulk image creation.

API Request Example:

curl -d '{
  "params": [
    { "name": "title", "text": "Welcome", "color": "#333" },
    { "name": "banner", "imageUrl": "https://example.com/banner.png" }
  ]
}' \
-H "Authorization: Bearer {API_KEY}" \
-H "Content-Type: application/json" \
-X POST https://api.dynapictures.com/designs/{UID}

API Response Example:

{
  "id": "c13bd141c7",
  "imageUrl": "https://api.dynapictures.com/images/d12fb6f526/e26ca071c7.png",
  "thumbnailUrl": "https://api.dynapictures.com/images/d12fb6f526/e26ca071c7-thumb.png"
}

This API workflow is ideal for generating multiple images or integrating with automation tools like Zapier.

Use Cases for Dynamic Image Generation With URL

DynaPictures supports a wide range of use cases, including:

1. Banner Images

Easily create banners for social media platforms like Twitter, LinkedIn, or Facebook. Use URL parameters to dynamically adjust text, logos, and background colors.

Example:

https://api.dynapictures.com/links/{UID}.png?params=banner---text___Sale Now<>logo---imageUrl___https://example.com/logo.png

2. Blog Thumbnails

Automate blog thumbnail creation by uploading multiple images or using a data source like a spreadsheet. Customize titles, colors, and featured images.

3. Bulk Image Generation

Generate hundreds of images for marketing campaigns by integrating DynaPictures with tools like Google Sheets or APIs.

Security and Best Practice of Image Generation with URL

When you embed the image on the page, someone else may look into the code of your page, take the image URL, and then place it on her own website. This will consume your credits. We are working on the protection for this case and will add the URL signature parameter soon.

You will need to calculate the signature and sign the request each time when you build a URL. This will ensure that only those having a signature key can use your URL parameters.

So here’s your checklist to generate images with URLs safely:

• URL Security: Protect your image URLs by implementing URL signing (coming soon).
• Metadata: Add metadata to track image context or associate data with generated files.
• Avoid Hardcoding: Use environment variables to store sensitive data like API keys.

Coming Features

We are going to include a cache parameter, that will allow you to control when the actual image is generated, when the credits are actually consumed, and when the already generated image is cached and returned in the response. Check this page later for updates.

FAQ