Title: WP_Customize_Cropped_Image_Control
Published: August 18, 2015
Last modified: February 24, 2026

---

# class WP_Customize_Cropped_Image_Control {}

## In this article

 * [Description](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#description)
    - [See also](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#see-also)
 * [Methods](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#methods)
 * [Source](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#source)
 * [Related](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#related)
 * [Changelog](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#changelog)
 * [User Contributed Notes](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#user-contributed-notes)

[ Back to top](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#wp--skip-link--target)

Customize Cropped Image Control class.

## 󠀁[Description](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#description)󠁿

### 󠀁[See also](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#see-also)󠁿

 * [WP_Customize_Image_Control](https://developer.wordpress.org/reference/classes/wp_customize_image_control/)

## 󠀁[Methods](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#methods)󠁿

| Name | Description | 
| [WP_Customize_Cropped_Image_Control::enqueue](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/enqueue/) | Enqueue control related scripts/styles. | 
| [WP_Customize_Cropped_Image_Control::to_json](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/to_json/) | Refresh the parameters passed to the JavaScript via JSON. |

## 󠀁[Source](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#source)󠁿

    ```php
    class WP_Customize_Cropped_Image_Control extends WP_Customize_Image_Control {

    	/**
    	 * Control type.
    	 *
    	 * @since 4.3.0
    	 * @var string
    	 */
    	public $type = 'cropped_image';

    	/**
    	 * Suggested width for cropped image.
    	 *
    	 * @since 4.3.0
    	 * @var int
    	 */
    	public $width = 150;

    	/**
    	 * Suggested height for cropped image.
    	 *
    	 * @since 4.3.0
    	 * @var int
    	 */
    	public $height = 150;

    	/**
    	 * Whether the width is flexible.
    	 *
    	 * @since 4.3.0
    	 * @var bool
    	 */
    	public $flex_width = false;

    	/**
    	 * Whether the height is flexible.
    	 *
    	 * @since 4.3.0
    	 * @var bool
    	 */
    	public $flex_height = false;

    	/**
    	 * Enqueue control related scripts/styles.
    	 *
    	 * @since 4.3.0
    	 */
    	public function enqueue() {
    		wp_enqueue_script( 'customize-views' );

    		parent::enqueue();
    	}

    	/**
    	 * Refresh the parameters passed to the JavaScript via JSON.
    	 *
    	 * @since 4.3.0
    	 *
    	 * @see WP_Customize_Control::to_json()
    	 */
    	public function to_json() {
    		parent::to_json();

    		$this->json['width']       = absint( $this->width );
    		$this->json['height']      = absint( $this->height );
    		$this->json['flex_width']  = absint( $this->flex_width );
    		$this->json['flex_height'] = absint( $this->flex_height );
    	}
    }
    ```

[View all references](https://developer.wordpress.org/reference/files/wp-includes/customize/class-wp-customize-cropped-image-control.php/)
[View on Trac](https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-includes/customize/class-wp-customize-cropped-image-control.php#L17)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-includes/customize/class-wp-customize-cropped-image-control.php#L17-L85)

## 󠀁[Related](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#related)󠁿

| Uses | Description | 
| [WP_Customize_Image_Control](https://developer.wordpress.org/reference/classes/wp_customize_image_control/)`wp-includes/customize/class-wp-customize-image-control.php` |

Customize Image Control class.

  |

| Used by | Description | 
| [WP_Customize_Site_Icon_Control](https://developer.wordpress.org/reference/classes/wp_customize_site_icon_control/)`wp-includes/customize/class-wp-customize-site-icon-control.php` |

Customize Site Icon control class.

  |

## 󠀁[Changelog](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#changelog)󠁿

| Version | Description | 
| [4.3.0](https://developer.wordpress.org/reference/since/4.3.0/) | Introduced. |

## 󠀁[User Contributed Notes](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#user-contributed-notes)󠁿

 1.  [Skip to note 2 content](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/?output_format=md#comment-content-4469)
 2.   [salam91](https://profiles.wordpress.org/salam91/)  [  5 years ago  ](https://developer.wordpress.org/reference/classes/wp_customize_cropped_image_control/#comment-4469)
 3. [You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_customize_cropped_image_control%2F%23comment-4469)
    Vote results for this note: 1[You must log in to vote on the helpfulness of this note](https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_customize_cropped_image_control%2F%23comment-4469)
 4. You can Fixed the Height and width area by using `'height'=>100` and `'width'=>
    100` respectively. Use `flex_width=> true` to get flexible width in cropper. you
    can also use `flex_height=>true` to get flexible height in cropper. A details examples
    is shown bellow
 5.     ```php
        $wp_customizer->add_control(
        		new WP_Customize_Cropped_Image_Control(
        			$wp_customizer,
        			'demo_image_settings',
        			array(
        				'label'      => __( 'Upload a File', 'Text Domain' ),
        				'section'    => 'customizer section name',
        				'height'=>100, // cropper Height
        				'width'=>100, // Cropper Width
        				'flex_width'=>true, //Flexible Width
        				'flex_height'=>true, // Flexible Heiht
        			)
        		)
        	);
        ```
    
 6.  [Log in to add feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_customize_cropped_image_control%2F%3Freplytocom%3D4469%23feedback-editor-4469)

You must [log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_customize_cropped_image_control%2F)
before being able to contribute a note or feedback.