Image Input

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

{
  input: {
    type: 'image', 
    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.

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

Template Usage

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:

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