
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>