4

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

}
| improve this answer | |
  • I want to know how to add custom sizes in the same manner that WordPress did for site icon, see : make.wordpress.org/core/2015/07/27/site-icon – Elidrissi simo Nov 18 '15 at 17:54
  • In this link is a example to filter via hook the site of the specific favicon size. But you will add custom images, with cropping on the Customizer, not after upload and usage of the image. – bueltge Nov 18 '15 at 21:22
0

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,
) ) );
| improve this answer | |
  • i think that with this code the controle will generate a 250*250 image plus the default sizes .(Say for example that i want to generate 3 spesific sizes for the logo image : 200 200 + 400 400 and 300*400 for responsive purpose – Elidrissi simo Nov 18 '15 at 19:16
  • Why not apply CSS rules for different display sizes? Wouldn't that be simpler and less confusing for the user than creating multiple file uploads? – Jeff W Nov 18 '15 at 19:21
  • I try to use "srcset". – Elidrissi simo Nov 18 '15 at 19:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.