# Image Property

The Image Property allows you to add an Image to a component, to name it, to set a Default image, to choose an URL and choose a simple (static) or advanced (static and dynamic) type.

* Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
* Select the Image Property you wish to configure.

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

* Input required information such as Name and Default.
* Choose Type as required, simple or advanced.

## Connect&#x20;

The Image Property needs to be connected for it to be applied to the canvas.

{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}

* Select the Component to which you want to connect the Image Property.
* Select "Modify" in the toolbar or the Block Inspector.

<figure><img src="/files/4niPs2yxvRuw8PPbx2eV" alt=""><figcaption></figcaption></figure>

This will open the component in the navigator so you can access the required block.

* Select required block.
* In the Block Inspector, find the Image Property and click the Component logo.
* Choose required block in the Source dropdown.

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

The Image Property will now become green.

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

If the Image property is correctly connected, you should see something like this when in "Customise".

* Click Image panel to open the Media modal.

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

* Select required image and click "Select".

<figure><img src="/files/3FhXNYuKFacaaecC0J8H" alt=""><figcaption></figcaption></figure>

The selected image will now be visible in the Image field of the Block Inspector.

<figure><img src="/files/6UYuKvlwWsxix19JQgue" alt=""><figcaption></figcaption></figure>

## Name

The Name property allows you to input a suitable name for your Image property.

* Input a suitable name.

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

Once connected, the chosen name will now be visible in the Block Inspector.

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

## Default

Allows you to set a suitable default image to your component.

* Open the Components Properties.
* Select required Image property.
* Open Settings tab.
* Click "Set Default Image" field or input URL.

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

* Select a suitable image.
* Click Select.

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

Once selected, you should be able to visualise the selected default image in the component Properties modal.

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

The image will appear by default on the canvas.

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

## Simple Type

The Simple Type property means that your image property is static.

* Open the Components Properties.
* Select required Image property.
* Open Settings tab.
* Select Simple as Type.

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

You will now be able to add a link to a static image.

<figure><img src="/files/8a2URIM4aS2ic2Az0FNN" alt=""><figcaption></figcaption></figure>

## Advanced Type

The Advanced Type property allows you to add dynamic or static content to your image field as required.

* Open the Components Properties.
* Select required Text property.
* Open Settings tab.
* Select Advanced as Type.

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

A Dynamic icon is now visible in the Block Inspector that will allow you to toggle on/off Dynamic content.

* In the Block Inspector, toggle dynamic on for dynamic content.
* This will open the Dynamic Image modal.
* Input settings as required.

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


---

# Agent Instructions: 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:

```
GET https://docs.cwicly.com/cwicly/components/properties-add/image-property.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
