class WP_Customize_Cropped_Image_Control {}

Customize Cropped Image Control class.

Description

See also

Methods

NameDescription
WP_Customize_Cropped_Image_Control::enqueueEnqueue control related scripts/styles.
WP_Customize_Cropped_Image_Control::to_jsonRefresh the parameters passed to the JavaScript via JSON.

Source

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 );
	}
}

Changelog

VersionDescription
4.3.0Introduced.

User Contributed Notes

  1. Skip to note 2 content

    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

    $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
    			)
    		)
    	);

You must log in before being able to contribute a note or feedback.