Logo Image not Displaying

IF I inspect the code via dev tools, I can see the full URI of the image is getting output to the browser. If I follow it the image displays in the browser perfectly fine on its own. I’m working on a local dev environment so posting a link to it isn’t an option, however I do have a test server I can upload to (not sure why I didn’t think of this before) so I’ll give that a shot later and see if there’s a difference. At the very least it should tell me if the issue is a local one or not.

I published it to coh.pdxchambers.com. The logo should display immediately to the left of the site title. When I check computed styles I don’t see anything obvious that would stop the image from being displayed, in fact the containing element displays exactly as it should if there’s nothing in it with a width of 8.3% and a min-height of 1 pixel. Maybe fresh eyes will see something I’m missing?

This is the function I’m using to display the logo. When I remove the class definition I get the same issue, however on inspecting the code it looks more in line with what it’s supposed to look like:

<div class="col-xs-1" <img src="http://192.168.1.200/wordpress/wp-content/themes/coh2017/images/logo.png"></div>

I can’t for the life of me see where there’s a problem, it seems like there should be no issue with having a class attribute before the src attribute in the element. Here’s the actual function that’s generating the code:

function coh2017_the_custom_logo(){
  /*
   * Echos custom HTML elements to support Bootstrap classes. If a change is needed to the branding of the theme,
   * this is where you'll want to do it.
   */

  $logo_id = get_theme_mod( 'custom_logo' );
  $logo = wp_get_attachment_image_src( $logo_id , 'full' );
  if (has_custom_logo() ) {
    echo '<div class="col-xs-1" <img class="img-responsive" src="' . esc_url( $logo[0] ) . '"></div>';
    echo '<div class="col-xs-11"><h1 id="site-title"><a href="' . esc_url( home_url( '/' ) ) . '" rel="home">' . esc_attr( get_bloginfo( 'name' ) ) . '</a></h1>';
    echo '<h2 id="site-description">' .  esc_attr( get_bloginfo( 'description' ) ) . '</h2></div>';
  } else {
    echo '<div class="col-xs-1" <img class="img-responsive" src="' . IMAGES_DIRECTORY . 'logo.png"></div>';
    echo '<div class="col-xs-11"><h1 id="site-title"><a href="' . esc_url( home_url( '/' ) ) . '" rel="home">' . esc_attr( get_bloginfo( 'name' ) ) . '</a></h1>';
    echo '<h2 id="site-description">' .  esc_attr( get_bloginfo( 'description' ) ) . '</h2></div>';
  }
}

I’m then calling coh2017_the_custom_logo(); in header.php.

EDIT: I should mention at this point it’s running the else clause as I haven’t actually added a custom logo in Theme Customizer yet.

• This reply was modified 9 years, 4 months ago by pdxchambers.

Wow… I totally didn’t see that! It’s working now, thank you so much!