theme customizer - How do I handle the "WP_Customize_Cropped_Image_Control" callback?

admin管理员组

文章数量:1122832

I want to make a logo manager in the Customizer, but how do I set different image sizes with the WP_Customize_Cropped_Image_Control class?

Example from Make WordPress Core:

$wp_customize->add_control( new WP_Customize_Cropped_Image_Control( $wp_customize, 'cropped_image', array(
    'section'     => 'background_image',
    'label'       => __( 'Croppable Image' ),
    'flex_width'  => true, // Allow any width, making the specified value recommended. False by default.
    'flex_height' => false, // Require the resulting image to be exactly as tall as the height attribute (default).
    'width'       => 1920,
    'height'      => 1080,
) ) );

I want to make a logo manager in the Customizer, but how do I set different image sizes with the WP_Customize_Cropped_Image_Control class?

Example from Make WordPress Core:

$wp_customize->add_control( new WP_Customize_Cropped_Image_Control( $wp_customize, 'cropped_image', array(
    'section'     => 'background_image',
    'label'       => __( 'Croppable Image' ),
    'flex_width'  => true, // Allow any width, making the specified value recommended. False by default.
    'flex_height' => false, // Require the resulting image to be exactly as tall as the height attribute (default).
    'width'       => 1920,
    'height'      => 1080,
) ) );

• theme-customizer
• logo

Share Improve this question edited Nov 16, 2015 at 20:19 Gabriel 2,2481010 gold badges2222 silver badges2424 bronze badges asked Nov 11, 2015 at 20:57 Elidrissi simoElidrissi simo 8599 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

I think you add for each logo a settings field? If no, please enhance your question.

If yes, then add also often the call for the cropped image control. The follow example add an section, an field for a logo option and get the possibility for cropping image.

add_action( 'customize_register', 'fb_logo_customize_register' );
function fb_logo_customize_register( $wp_customize ) {

    /* Add the logo section. */
    $wp_customize->add_section(
        'logo',
        array(
            'title'       => esc_html__( 'Logo', 'textdomain' ),
            'description' => __( 'Manage User List', 'textdomain' ),
            'priority'    => 10,
            //'panel'       => 'fb_panel' // not inside the example code, 
        )
    );

    /* Add the setting for our logo value. */
    $wp_customize->add_setting(
        'site_logo',
        array(
            'default'           => '',
            'sanitize_callback' => 'absint'
        )
    );

    /* Add our image uploader. */
    $wp_customize->add_control(
        new WP_Customize_Cropped_Image_Control(
            $wp_customize,
                'site_logo',
                array(
                    'label'       => __( 'Site Logo', 'textdomain' ),
                    'section'     => 'logo',
                    'flex_width'  => true,
                    'flex_height' => true,
                    'width'       => 240,
                    'height'      => 80,
                )
        )
    );

}

This is the way we did it - our aim was to create a circular profile picture, so we forced a square crop on upload - you should be able to do something similar for a logo upload.

The size you define is going to determine the dimensions of the displayed end result, so for my example, if a user were to crop a rectangle, the end result is still going to be rendered as a square, warping the image. To avoid this, you should probably have in mind what type of logo would work best for the area you're considering in the theme, whether it's a badge type logo, a rectangular logo, an amorphous logo, etc., and keep the flex settings to 'false' - the last thing any user wants is for their logo to end up displaying wonky.

Anyhow, I hope you find this helpful!

$wp_customize->add_setting( 'theme_profile_picture', array(
    'transport' => 'refresh',
    'sanitize_callback' => 'theme_sanitize_profile_picture',
));

$wp_customize->add_section('theme_profile_picture_section', array(
    'title' => __('Profile Picture', 'theme'),
    'priority' => 10,
));

$wp_customize->add_control( new WP_Customize_Cropped_Image_Control( $wp_customize, 'theme_profile_picture', array(
    'label'    => __( 'Upload Profile Picture', 'theme' ),
    'section' => 'title_tagline',
    'settings' => 'theme_profile_picture',
    'flex_width'  => false, // Allow any width, making the specified value recommended. False by default.
    'flex_height' => false,
    'width'       => 250,
    'height'      => 250,
) ) );

本文标签： theme customizerHow do I handle the quotWPCustomizeCroppedImageControlquot callback