Get Image Width From WP_Customize_Image_Control() File Set in WP Theme Customizer

Question

Here's the code we're using to set an image file as an option for the site's logo via WordPress' theme customizer:

/* Logo > Image
-------------------------------------------------- */
$wp_customize->add_setting( 'themeslug_logo' );

$wp_customize->add_control( 
    new WP_Customize_Image_Control( 
        $wp_customize, 'themeslug_logo', array(
            'label'    => __( 'Logo', 'themeslug', 'themeslug' ),
            'section'  => 'themeslug_header',
            'settings' => 'themeslug_logo',
            'description' => 'Upload a logo to replace the default site name in the header.',
        )
    )
);

Accordingly, we're displaying the logo like this:

<img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> Logo' class="img-responsive">

However, in doing so, we realized that we're not setting the image height/ width attributes.

So, what we want to accomplish is to pull the image height/width from the uploaded media file, store them as a variable, and then execute them, like:

<?php
    $logo = get_theme_mod( 'themeslug_logo' );
    $logoatts = wp_get_attachment_metadata($logo); // obviously doesn't work
    $logoheight = ; // don't know how to get this
    $logowidth = ; // don't know how to get this
?>
<img
    src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>'
    alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> Logo'         
    class="img-responsive"
    height="<?php echo($logoheight);?>"
    width="<?php echo($logowidth);?>"
>

Essentially, where we're running into issues is: we want to get the image width from the file as set per WP_Customize_Image_Control() instead of just the URL.

Thanks in advance

Answer 1

Modern answer to this question:

We have WP_Customize_Media_Control control in WP since 4.2 that gives you the attachment id.

This answer was posted on I similar question. You can see the documentation for WP_Customize_Media_Control here.

Exemple of use:

$wp_customize->add_setting( 'my_menu_image' );
        $wp_customize->add_control( new \WP_Customize_Media_Control(
            $wp_customize,
            'storms_menu_image_ctrl',
            array(
                'priority'    => 10,
                'mime_type'   => 'image',
                'settings'    => 'my_menu_image',
                'label'       => __( 'Image on menu bar', 'my' ),
                'section'     => 'title_tagline',
            )
        ) );

When retrieving the info, you can do this:

$image_id = get_theme_mod( "my_menu_image" );
if ( ! empty( $image_id ) ) {
    $url          = esc_url_raw( wp_get_attachment_url( $image_id ) );
    $image_data  = wp_get_attachment_metadata( $image_id );
    $width = $image_data['width'];
    $height = $image_data['height'];
}

Answer 2

OK, well, we found a quick and perhaps a bit dirty solution using PHP's getimagesize () function.

Specifically, this is the code:

<?php if ( get_theme_mod( 'themeslug_logo' ) ) : 
    $themelogo = get_theme_mod( 'themeslug_logo' );
    $themelogo_size = getimagesize($themelogo);
    $themelogo_width = $themelogo_size[0];
    $themelogo_height = $themelogo_size[1];
?>
<img src='<?php echo esc_url( get_theme_mod( 'themeslug_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> Logo' class="img-responsive full" height="<?php echo($themelogo_height);?>" width="<?php echo($themelogo_width);?>">

I'm not sure if this is the best method or not, so if anyone else has a bright idea, I'd love to hear it!

Answer 3

The above answer is definitely the best to get image sizes via the customized here is a bit of extra information.

    // Add your customizer block
    $wp_customize->add_setting(
        'logo'
    );

    $wp_customize->add_control(
        new WP_Customize_Media_Control(
            $wp_customize, 
            'logo', 
            array(
                'label'    => __('Logo', 'theme'),
                'section'  => 'styles',
                'settings' => 'logo',
            )
        )
    );

    // Add your image size to your function.php file
    add_image_size('logo_image_size', 100, 9999, false);

    // Output your media anywhere in your theme
    $logo = get_theme_mod( "logo" );

    if ( !empty($logo) ) { 

        echo wp_get_attachment_image( $logo, 'logo_image_size' ) ;

    }