---
url: /documentation/input-types/image.md
description: >-
  Configure image picker inputs with multiple selection, dimensions, image
  sizes, and list or grid presentation.
---

# Image Input

Enabled to choose one or multiple images and define its order.

```js
{
  input: {
    type: 'image', // [!code focus:5]
    multiple: true,
    minWidth: 800,
    chooseButton: { label: 'Bild auswählen' },
    dialog: { button: 'Bild auswählen' }
  },
}
```

## Input Options

| Option | Values | Default | Description |
| - | - | - | - |
| `required` | `boolean` | `false` | Whether picking an image is mandatory.   |
| `multiple` | `boolean` | `false` | Allow to select multiple if true. |
| `min` | `number` | - | Minimum number of images to select (only if `multiple` is enabled). |
| `max` | `number` | - | Maximum number of images to select (only if `multiple` is enabled). |
| `minWidth` | `number` | - | Minimum width of the selected image(s).  |
| `maxWidth` | `number` | - | Maximum width of the selected image(s).  |
| `minHeight` | `number` | - | Minimum height of the selected image(s). |
| `maxHeight` | `number` | - | Maximum height of the selected image(s). |
| `sizes` | `Array<{ value: string, label: string }>` | - | Image sizes to pick from. |
| `dialog.button` | `string` | `'Auswählen'` | Text on the blue WP Media Frame button.  |
| `chooseButton.label` | `string` | `'Bilder auswählen'` | Text on the select media button. |
| `listType` | `'list' \| 'grid'` | `'list'` | Layout to display input. |

## Value Format

The value of the `image` input consists of objects of the shape below. It always is returned as an array, even if only a single image can be selected.

```js
[
  {
    "id": 123,
    "preview": {
      "url": "http://localhost/wp-content/uploads/image-150x150.jpg",
      "filename": "image.jpg"
    }
  }
]
```

## Template Usage

```php
add_filter('wpce_render_example', function ($wpce, $element) {
	$props = $element->properties;

	$images_html = '';
	foreach ($props->image as $image) {
		$images_html .= wp_get_attachment_image($image->id, $props->size);
	}

	return $images_html;
}, 20, 2);
```

## Conditions

The `image` input type supports the following conditions for [dynamic visibility](/documentation/concepts/elements/definition#dynamic-visibility):

| Condition | Payload | Description |
| - | - | - |
| `isEmpty` | `boolean`defaults to `true` | Checks whether or not an image has been selected. |