The Image control allows you create a control where users can upload images or select images from their media-library. You can choose how you want your data to be saved. By default the control saves the URL of the image as a string but you have the ability to save the data as an array( 'url', 'id', 'width', 'height' ) or as integer (image ID).

Examples

/**
 * Default behaviour (saves data as URL)
 */
new \Kirki\Field\Image(
	[
		'settings'    => 'image_setting_url',
		'label'       => esc_html__( 'Image Control (URL)', 'kirki' ),
		'description' => esc_html__( 'The saved value will be the URL.', 'kirki' ),
		'section'     => 'section_id',
		'default'     => '',
	]
);

/**
 * Save data as integer (image ID)
 */
new \Kirki\Field\Image(
	[
		'settings'    => 'image_setting_id',
		'label'       => esc_html__( 'Image Control (ID)', 'kirki' ),
		'description' => esc_html__( 'The saved value will be the ID.', 'kirki' ),
		'section'     => 'section_id',
		'default'     => '',
		'choices'     => [
			'save_as' => 'id',
		],
	]
);

/**
 * Save data as an array.
 */
new \Kirki\Field\Image(
	[
		'settings'    => 'image_setting_id',
		'label'       => esc_html__( 'Image Control (array)', 'kirki' ),
		'description' => esc_html__( 'The saved value will be an array.', 'kirki' ),
		'section'     => 'section_id',
		'default'     => '',
		'choices'     => [
			'save_as' => 'array',
		],
	]
);

Usage

<?php $image = get_theme_mod( 'image_setting_url', '' ); ?>
<div style="background-image: url('<?php echo esc_url( $image ); ?>')">
	Set the background-image of this div from "image_setting_url".
</div>