0

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

3 Answers 3

2

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'];
}
1

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!

0

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

    } 

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.