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

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!

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.