How to add an img on top of the blog

Viewing 13 replies - 16 through 28 (of 28 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Yes that’s correct. I put the echo statements in to clarify which was for the homepage, but you can remove those in your update.

    The only code you need to put into the if/else statement is the code for outputting the header image. The rest of header.php can remain as-is.

    I would recommend having an FTP client open (like FileZilla) in case there are any fatal errors (white screens). It’s pretty easy to forget a parenthesis or quote and cause one. If you’re connected to your site via FTP, the moment the site goes down you can just open up the PHP file and undo your change. Then there’s really no harm done since you can quickly undo any breaking changes.

    It also might be a good idea to store a copy of your current header.php file on your computer, just in case you have trouble undoing any breaking changes you can revert to the original file.

    https://69.195.124.168/~onceweso/

    Hey Ben,

    I’m not sure I’m doing this correctly… above is what the site looks like right now… am I putting this code in the wrong place?

    This is part of the .php file now, as I have it:
    <!DOCTYPE html>
    <!–[if IE 9 ]>
    <html class=”ie9″ <?php language_attributes(); ?>> <![endif]–>
    <!–[if (gt IE 9)|!(IE)]><!–>
    <html <?php language_attributes(); ?>><!–<![endif]–>

    <head>
    <?php wp_head(); ?>
    </head>

    <body id=”<?php print get_stylesheet(); ?>” <?php body_class( ‘ct-body’ ); ?>>
    <?php do_action( ‘tracks_body_top’ ); ?>
    if ( is_front_page() ) {
    echo “homepage”
    <div id=”overflow-container” class=”overflow-container”>
    <?php _e( ‘Skip to content’, ‘tracks’ ); ?>
    <?php get_template_part( ‘content/top-navigation’ ); ?>
    <div class=”container”>
    <div id=”header-image” class=”header-image” style=”height: 650px; padding-bottom: 0px; background-image: url(‘https://69.195.124.168/~onceweso/wp-content/uploads/2015/11/fall-2.png&#8217;)”><div id=”title-info”><img src=”https://69.195.124.168/~onceweso/wp-content/uploads/once-logos-big-03-300×101.png&#8221; alt=”once logos big-03″ width=”300″ height=”101″ class=”once-logo alignnone size-medium wp-image-906″ /></div></div>
    </div>
    }

    else {
    <header id=”site-header” class=”site-header” role=”banner”>
    <?php get_template_part( ‘content/top-navigation’ ); ?>
    <div class=”container”>
    <div id=”title-info” class=”title-info”>
    <?php get_template_part( ‘logo’ ) ?>
    </div>
    <?php get_template_part( ‘menu’, ‘primary’ ); ?>
    </div>
    </header>
    }

    Thoguhts? Help!

    Theme Author Ben Sibley

    (@bensibley)

    The statement only needs to contain the code for the image itself. Try updating it to the following: 

    <!DOCTYPE html>
<!--[if IE 9 ]>
<html class="ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html <?php language_attributes(); ?>><!--<![endif]-->

<head>
	<?php wp_head(); ?>
</head>

<body id="<?php print get_stylesheet(); ?>" <?php body_class( 'ct-body' ); ?>>
	<?php do_action( 'tracks_body_top' ); ?>
	<div id="overflow-container" class="overflow-container">
		<a class="skip-content" href="#main"><?php _e( 'Skip to content', 'tracks' ); ?></a>
		<header id="site-header" class="site-header" role="banner">
			<?php get_template_part( 'content/top-navigation' ); ?>
			<div class="container">
				<?php
				if ( is_front_page() ) { ?>
					<div id="header-image" class="header-image" style="height: 650px; padding-bottom: 0px; background-image: url('https://69.195.124.168/~onceweso/wp-content/uploads/2015/11/fall-2.png')">
				<?php } else { ?>
					<div id="header-image" class="header-image" style="height: 650px; padding-bottom: 0px; background-image: url('https://69.195.124.168/~onceweso/wp-content/uploads/2015/11/fall-2.png')">
				<?php } ?>
				<div id="title-info" class="title-info">
					<?php get_template_part( 'logo' ) ?>
				</div>
				<?php get_template_part( 'menu', 'primary' ); ?>
			</div>
		</header>
		<div id="main" class="main" role="main">
			<?php if ( function_exists( 'yoast_breadcrumb' ) ) {
				yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );
			}
			do_action( 'tracks_main_top' );

    You can see on line 19 where is_front_page() gets called and outputs the header image if currently on the front page. Right now, the code displays the same image on all pages, but if you update the URL of the image in the else part, this will change the image across every page besides the homepage.

    Hey Ben,

    Thank you so much for your help above – that problem is totally fixed!

    I have noticed, however, that now my menu doesn’t work well either on mobile or when the window narrows – I’ve looked at the code and I can’t figure out why it would be different. Any ideas?

    Thank you!

    Theme Author Ben Sibley

    (@bensibley)

    Great glad that worked!

    It looks like the mobile menu button is technically behind part of the site-title element, which is why it can’t be clicked.

    We can increase the z-index of it like this to make sure it’s always clickable:

    .toggle-navigation {
  z-index: 99 !important;
}

    Thank you!!!!!

    Theme Author Ben Sibley

    (@bensibley)

    You’re welcome ??

    Hey Ben,

    I don’t know why, but for some reason the code you provided above still isn’t working when I make my window smaller or look at it on mobile. I looked at the code, and should it be #toggle-navigation instead?

    Just curious… it’s been hard to adjust things for the different media screens!

    Thanks ??

    Katie

    Theme Author Ben Sibley

    (@bensibley)

    Hey Katie,

    I’m seeing a Javascript error on the site now that is likely preventing the menu from opening. Here is a screenshot of the error message: https://pics.competethemes.com/3L3O2K0H0Y2g

    This is coming from a plugin on the site, but I’m not sure which one. Could you try temporarily deactivating your plugins to check if the menu then opens properly? Deactivating the plugins won’t affect their settings in any way.

    Thanks Ben, I know what that was, and I got rid of it!

    I’m working on making my header image bigger height-wise than it is right now… ideally I’d love for it to be around 720-800px, but I also want it to be responsive.

    How can I adjust the height in the CSS so that it scales for mobile like the featured images do? Right now my header is too narrow, nand it shrinks into nothing on mobile.

    Theme Author Ben Sibley

    (@bensibley)

    Try this CSS out:

    #header-image {
  position: relative;
  height: 0;
  padding-bottom: 25%;
}

    This is the technique used for the Featured Images. It will keep the background image centered in the middle, and adapt the height based on the width of the screen.

    This will affect how the logo is displayed, so you can add this CSS as well to keep that centered in the middle:

    @media only screen and (min-width: 37.5em) {

  #title-info {
    position: absolute;
    top: calc(50% - 45px);
  }
}

    Hey,

    I’m sorry to be so high-maintenance! I added the code, but now the header is a small strip – how can I set it to a bigger height like the other images, that still is responsive?

    Thanks Ben!!!

    Theme Author Ben Sibley

    (@bensibley)

    No worries, it looks like the padding-bottom part that gives it the height wasn’t specific enough to override the existing CSS.

    You can update the snippet with an !important tag like this to make it work:

    #header-image {
  position: relative;
  height: 0;
  padding-bottom: 25% !important;
}

    That should do the trick, but please let me know if there are still any issues.

Viewing 13 replies - 16 through 28 (of 28 total)
  • The topic ‘How to add an img on top of the blog’ is closed to new replies.