> For the complete documentation index, see [llms.txt](https://userguide.zappost.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://userguide.zappost.com/zap-post-web-app/zap-post-user-guide/zapp/using-the-zapp/design/dynamic-images.md).

# Dynamic Images

To get started, follow these steps:

### Campaign Creation

In order to include dynamic images on a design, you'll need to create a new campaign and add a custom field to your template, for more help on this see [our campaigns guide](/zap-post-web-app/zap-post-user-guide/zapp/using-the-zapp/campaigns.md).

When adding a custom field, you need to ensure the below fields are completed, for more help on creating custom fields, see [our custom fields guide](/zap-post-web-app/zap-post-user-guide/zapp/using-the-zapp/campaigns.md#custom-field-setup).

<table><thead><tr><th>Field</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Name</td><td>The name of the field. This will be shown in CSV templates as column headers.</td><td></td></tr><tr><td>Description</td><td>This will identify the use of the field to users submitting via CSV. The CSV template will contain the description below each column header.</td><td></td></tr><tr><td>Mandatory</td><td>If a value must be included for the field.</td><td></td></tr><tr><td>Label</td><td>This will be used in the design to identify the field so that it can be replaced for submitted data.</td><td></td></tr><tr><td>Data Type</td><td>This must be set to URL</td><td></td></tr></tbody></table>

<figure><img src="/files/nkpAocLWn4Mau43ZKe2G" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/1BY4XFvfnF7DzGeQbrWo" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/LXPnFuwp02pIqM3nNRJM" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/5D3PAIbeBNA3kgsyBPPR" alt=""><figcaption></figcaption></figure>

### Designer

Adding a dynamic image to your design couldn't be easier, choose 'Dynamic Image' from the widget toolbar.

<figure><img src="/files/17yluQ5IqYpqfgrhSuU6" alt=""><figcaption><p>Widget Toolbar</p></figcaption></figure>

By selecting 'Dynamic Image' a placeholder will automatically be added to the canvas. Once on the canvas you can treat it as any other image by moving and resizing as desired.

When clicking on the placeholder, you'll see the management area. Here you need to click on the 'Custom Field' drop down and select the field you would like the image to be mapped to.

{% hint style="info" %}
The custom field name will be the same name you gave the field during the campaign creation.&#x20;
{% endhint %}

<figure><img src="/files/Fd9WykPwbrT33tENXVSV" alt=""><figcaption><p>ZAP-POST Designer</p></figcaption></figure>

Using the management area, you can adjust the exact width and height of the placeholder.

{% hint style="warning" %}
When adding a dynamic image, auto save will temporarily be disabled until a custom field has been selected.
{% endhint %}

### Proofing

You can proof and publish your designs if you have included a dynamic image. When going through the proofing or publishing journey, you have the option to create a proof with your own data or existing sample data, for more help on proofing, follow [our proofing guide](/zap-post-web-app/zap-post-user-guide/zapp/using-the-zapp/design.md#proofing).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://userguide.zappost.com/zap-post-web-app/zap-post-user-guide/zapp/using-the-zapp/design/dynamic-images.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
