The Image control allows you to 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 an 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>