Hello everyone,
Today I am going to illustrate on , how to cropped image on customizer.
Normally we use WP_Customize_Image_Control for selecting image on customizer section, but this doesn’t provide you the featured to cropped image on your requirement.
But WordPress provide us class called ‘WP_Customize_Cropped_Image_Control‘ which provide you the featured to crop a image.You can see full code here: https://core.trac.wordpress.org/browser/tags/4.6/src/wp-includes/customize/class-wp-customize-cropped-image-control.php#L17
Before starting the tutorial I hope you all guys know how to add section, setting and control on customizer.
Step 1: First create section:
$wp_customize->add_section( 'themeslug_section', array( 'title' => __( 'Cropped Image', 'theme-text-domain' ), 'priority' => 1, ) );
Step 2: Create setting id and control panel:
$wp_customize->add_setting( 'theme_slug_create_cropped_image', array(
'sanitize_callback' => 'absint',
) );
$wp_customize->add_control( new WP_Customize_Cropped_Image_Control( $wp_customize, 'theme_slug_create_cropped_image', array(
'label' => __('Cropped the selected Image', 'theme-text-domain'),
'section' => 'themeslug_section',
'height' => 100,
'width' => 100,
'flex_width ' => false,
'flex_height ' => false,
'priority' => 1
)));
Note: Here we are using absint as sanitize callback, as WP_Customize_Cropped_Image_Control class store
image id on database. Sanitizing customizer is most on every customizer setting.
Step 3: Finally we need to display the selected image. For this we are using wp_get_attachment_image()
function, See here for reference: https://developer.wordpress.org/reference/functions/wp_get_attachment_image/
Let me know if you have any question or queries or any other best solution.You can ping me on adhsushil7@gmail.com
Thanks
Sushil Adhikari 