0

I have the following code installed in my header.php:

<h1><img src="<?php echo esc_url( get_theme_mod( 'mitch_logo' ) ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></h1>

And in my functions.php, I have the following code:

$wp_customize->add_section( 'mitch_logo_section' , array(
    'title'       => __( 'Logo', 'mitch_logo' ),
    'priority'    => 30,
    'description' => 'Upload your logo.',
) );

$wp_customize->add_setting( 'mitch_logo' );
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'mitch_logo', array(
    'label'    => __( 'Logo', 'mitch_logo' ),
    'section'  => 'mitch_logo_section',
    'settings' => 'mitch_logo',
) ) );

Works great, but I want to have a div called .logo with the logo width and height. How I do get those?

.logo {
    width:{width}; // how to get width of image?
    height:{height}; // how to get height of image?
    background: ...;
}

Because you need width and height to get a div with background to work.

0

You can use getimagesize() for this purpose:

list($width, $height) = getimagesize(esc_url( get_theme_mod( 'mitch_logo' ) ));

echo ".logo {
    width:{$width}px;
    height:{$height}px;
    background: ...;
}";

If that adds a little milliseconds to your page load time, I can edit this to provide a JavaScript version of the answer :)

Hope that helps.

|improve this answer|||||
  • 1
    Thank you Samuel, I want this to be fully PHP, so no javascript version is needed, thanks for the offer, though! Works great. :) – J. Doe Jun 4 '16 at 23:34
  • note getimagesize needs allow_url_fopen to work with URLs... though it is rarely off it could be, so if it is a public theme you may want to add a check if (!ini_get('allow_url_fopen')) { with a fallback to convert the URL back to a filepath to callgetimagesize on that instead. – majick Jun 5 '16 at 2:46

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.