WordPress.org

Ready to get started?Download WordPress

Forums

How Do I Reduce Height of Banner Image? (30 posts)

  1. agfreesafety
    Member
    Posted 2 years ago #

    I don't have the HEADER_IMAGE_HEIGHT value in my Functions.php file mentioned here.

    I don't have the add_filter value referenced in this blog post in my functions.php file.

    I read this forum post here on WordPress, which says that I should be able to reduce the size of my banner image from within WordPress itself. I have the latest version installed; if that's the case, then where do I make that modification?

  2. agfreesafety
    Member
    Posted 2 years ago #

    Oh, by the way, here is the site I'm currently working on.

  3. patv
    Member
    Posted 2 years ago #

    You should be able to (re)defined constants in your functions.php, no?

    define('HEADER_IMAGE_HEIGHT, 150)

  4. Gyan
    Member
    Posted 2 years ago #

    can't do with css ?

  5. esmi
    Forum Moderator
    Posted 2 years ago #

    This is far better done via a child theme.

  6. agfreesafety
    Member
    Posted 2 years ago #

    patv,

    I get this error when I try to save my changes after adding that line to the end of my functions.php file.

  7. agfreesafety
    Member
    Posted 2 years ago #

    esmi,

    Thanks for answering. I have an I.T. background, but I'm a little intimidated by going through the steps required to create a child theme, but I'm reading through what you provided to see just how complex that is to do.

    Thanks

  8. patv
    Member
    Posted 2 years ago #

    You might have to set the line within a function, such one that is triggered when WordPress is being loaded upon a page request. I can't seem to find the action hook for you, but if you look around in the codex you probably will be able to find it.

  9. agfreesafety
    Member
    Posted 2 years ago #

    esmi,

    After adding patv's suggested code via a child theme (named custom blogolife), which I placed at the root theme folder and activated it from within WordPress.

    Here's what the syle.css looks like:

    /*
    Theme Name: blogolife Child
    Description: Child theme for the blogolife theme
    Author: AG
    Template: blogolife
    */
    
    define('HEADER_IMAGE_HEIGHT, 150);
    }
  10. patv
    Member
    Posted 2 years ago #

    @agfreesafety, the code i sent you is PHP, so it has to be set in the functions.php file. It won't get recognized in a .css file.

  11. agfreesafety
    Member
    Posted 2 years ago #

    Sorry, I meant to add that this is what I'm getting when I try to visit my URL

  12. patv
    Member
    Posted 2 years ago #

    What's the foreach() code? Can you post it?

  13. agfreesafety
    Member
    Posted 2 years ago #

    You might have to set the line within a function, such one that is triggered when WordPress is being loaded upon a page request. I can't seem to find the action hook for you, but if you look around in the codex you probably will be able to find it.

    @agfreesafety, the code i sent you is PHP, so it has to be set in the functions.php file. It won't get recognized in a .css file.

    Is it possible that you could give me an example of how this might be done?

    I'm all for stretching my comfort zone (thanks to esmi), however I'm searching through codex currently, and I'm a little lost :-(

  14. agfreesafety
    Member
    Posted 2 years ago #

    I can't access my webpage anymore.

    When I tried to access my site 5 minutes ago, I got an error.

    Now when I try, I get this error.

    If you can help me get rid of this error, it would be appreciated, I'd just have to deal with the tall header image, as I didn't know it would be this much work to make it shorter :-)

    Please help. Thanks

  15. agfreesafety
    Member
    Posted 2 years ago #

    By the way, here's the contents of the header.php file. I have no idea what is going on here.

    <?php
    /**
     * The header template
     *
     * @package wplook
     * @subpackage BlogoLife
     * @since BlogoLife 1.0
     */
    ?>
    <?php global $options;
    foreach ($options as $value) {
    	if (isset($value['id']) && get_option( $value['id'] ) === FALSE && isset($value['std'])) {
    		$$value['id'] = $value['std'];
    	}
    	elseif (isset($value['id'])) { $$value['id'] = get_option( $value['id'] ); }
    }?>
    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <title><?php global $page, $paged;
    	wp_title( '', true, 'right' );
    	// Add the blog description for the home/front page.
    	$site_name = get_bloginfo( 'name', 'display' );
    	if ( $site_name && ( is_home() || is_front_page() ) )
    		echo " $site_name";
    	// Add a page number if necessary:
    	if ( $paged >= 2 || $page >= 2 )
    		echo ' | ' . sprintf( __( 'Page %s', 'wplook' ), max( $paged, $page ) );
    	?></title>
    <?php wplook_meta_description();?>
    
    <meta name="keywords" content="<?php echo $wpl_meta_keywords; ?>" />
    <link rel="shortcut icon" href="<?php echo $wpl_favicon_url; ?>" />
    <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri() ?>/images/apple-touch-icon.png" />
    <?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <?php echo stripslashes($wpl_ga_code); ?>
    <?php wp_head(); ?>
    	</head>
    <body <?php body_class('two-column right-sidebar'); ?>>
    <div id="page"<?php if (is_single() || is_page() ) { $sidebar = get_post_meta($post->ID,'wpl_enable_sidebar',true);  if($sidebar=="false") echo ' class="template-full-widch"'; } ?>>
    	<header id="branding">
    <hgroup class="fleft">
    	<h1 id="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo('description'); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
    	<h2 id="site-description"><?php bloginfo('description'); ?></h2>
    </hgroup>
    <div class="header-desc fright"><p><?php echo stripslashes($wpl_header_desc); ?></p></div>
    <div class="clear"></div>
    <div class="social-icons fright">
    
    <?php if ($wpl_twitter != '') { ?>
    <a href="<?php echo $wpl_twitter; ?>" target="_blank" title="<?php _e('Twitter', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/icons/twitter.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_google_plus != '') { ?>
    <a href="<?php echo $wpl_google_plus; ?>" target="_blank" title="<?php _e('Google +', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/icons/google-plus.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_facebook != '') { ?>
    <a href="<?php echo $wpl_facebook; ?>" target="_blank" title="<?php _e('FaceBook', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/icons/facebook.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_linkedin != '') { ?>
    <a href="<?php echo $wpl_linkedin; ?>" target="_blank" title="<?php _e('Linkedin', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/icons/linkedin.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_tumblr != '') {	?>
    <a href="<?php echo $wpl_tumblr; ?>" target="_blank" title="<?php _e('Tumblr', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/tumblr.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_delicious != '') {	?>
    <a href="<?php echo $wpl_delicious; ?>" target="_blank" target="_blank" title="<?php _e('Delicious', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/delicious.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_digg != '') {	?>
    <a href="<?php echo $wpl_digg; ?>" target="_blank" title="<?php _e('Digg', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/digg.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_stumbleupon != '') {	?>
    <a href="<?php echo $wpl_stumbleupon; ?>" target="_blank" title="<?php _e('Stumbleupon', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/stumbleupon.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_flickr != '') {	?>
    <a href="<?php echo $wpl_flickr; ?>" target="_blank"  title="<?php _e('Flickr', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/flickr.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_picasa != '') {	?>
    <a href="<?php echo $wpl_picasa; ?>" target="_blank" title="<?php _e('Picasa', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/picasa.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_youtube != '') {	?>
    <a href="<?php echo $wpl_youtube; ?>" target="_blank" title="<?php _e('YouTube', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/youtube.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_dribbble != '') {	?>
    <a href="<?php echo $wpl_dribbble; ?>" target="_blank" title="<?php _e('Dribble', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/dribbble.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_rss != '') { ?>
    <a href="<?php echo $wpl_rss; ?>" target="_blank" title="<?php _e('Subscribe to RSS', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/rss.png" width="22" height="22" /></a>
    <?php } ?>
    </div><div class="clear"></div>
    </header>
    
    <?php if ($wpl_menu == '' || $wpl_menu == 'Display') { ?>
    <nav>
    	<?php wp_nav_menu( array('depth' => '3', 'theme_location' => 'primary' )); ?>
    	<div class="left-corner"></div>
    	<div class="right-corner"></div>
    </nav>
    <?php } ?>
    <div id="header-image">
    <?php
    				//Code from 2011 theme by wordpress theme team
    				//Check to see if the header image has been removed
    				$header_image = get_header_image();
    				if ( ! empty( $header_image ) ) :	?>
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    				<?php
    					// The header image
    					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
    					if ( is_singular() &&
    							has_post_thumbnail( $post->ID ) &&
    							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
    							$image[1] >= HEADER_IMAGE_WIDTH ) :
    						// Houston, we have a new header image!
    						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
    					else : ?>
    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
    				<?php endif; // end check for featured image or standard header ?>
    			</a>
    			<?php endif; // end check for removed header image ?>
    			<?php // Has the text been hidden?
    				if ( 'blank' == get_header_textcolor() ) :
    			?>
    <?php endif; ?>
    </div>
    <div id="main">
  16. esmi
    Forum Moderator
    Posted 2 years ago #

    Re-upload a fresh copy of the theme to wp-content/themes using FTP or whatever file management application your host provides.

    This is another reason why you should always use a child theme.

  17. agfreesafety
    Member
    Posted 2 years ago #

    Re-upload a fresh copy of the theme to wp-content/themes using FTP or whatever file management application your host provides.

    This is another reason why you should always use a child theme.

    Thanks, I just overwrote it with a fresh copy. Thanks for the suggestion.

    Might you be so kind as to explain how I should go about doing this with a child theme?

    Obviously there's something I'm misunderstanding on that page you referred me to. I thought I understood it conceptually, though, I'm not sure what I did wrong when I tried to create the child theme.

  18. agfreesafety
    Member
    Posted 2 years ago #

    What's the foreach() code? Can you post it?

    Sure thing, patv.

    Here's the code for the foreach in my header.php file:

    <?php global $options;
    foreach ($options as $value) {
    	if (isset($value['id']) && get_option( $value['id'] ) === FALSE && isset($value['std'])) {
    		$$value['id'] = $value['std'];
    	}
    	elseif (isset($value['id'])) { $$value['id'] = get_option( $value['id'] ); }
    }?>
  19. patv
    Member
    Posted 2 years ago #

    @agfreesafety, yes i probably caused more harm than good suggesting you to modify the PHP. Follow esmi's instructions and create a child theme. I don't know how to do this myself, but the advantage of creating a child theme is that if something breaks it has a fallback to its parent theme.

    In your child theme, create a functions.php file and add the code I mentionned above.

  20. esmi
    Forum Moderator
    Posted 2 years ago #

    You can't re-DEFINE a constant in a child without at least triggering a warning (which may or may not be visible). Instead the theme provides a filter than you can use. Try:

    // Change header image height
    function my_new_header_height($height) {
    	$height = 150;
    	return $height;
    }
    add_filter( 'wplook_header_image_height', 'my_new_header_height' );
  21. patv
    Member
    Posted 2 years ago #

    It wouldn't be a redefinition since it's not defined yet - he can't pull that value without getting a error. Thought if esmi's code works, then use it. I've something new today myself :)

  22. esmi
    Forum Moderator
    Posted 2 years ago #

    since it's not defined yet

    It's defined in functions/fe/setup.php

  23. agfreesafety
    Member
    Posted 2 years ago #

    In your child theme, create a functions.php file and add the code I mentionned above.

    When I selected the new theme (the child I created and placed in the same directory as the Blogolife theme) that I'm using it loses all of the formatting and such that was created via the Blogolife theme.

    What might I be doing wrong?

    In theory, at least to me, it makes sense that this is happening, because step 3 in the "Example of a basic Child Theme" section on the Child Themes codex page says:

    Make a new directory in wp-content/themes, and name it twentyeleven-child (or anything you like).
    Save the code below in a file named style.css, and drop this file in the new directory.
    Go to Dashboard › Themes and activate your new theme, the Twenty Eleven Child.

    My two questions:

    1. How can you activate the child theme without DE-activating the current theme? I think that's what's going on here.
    2. Is my child theme coded correctly?

    Here are the contents of my style.css that's tucked into my child theme's directory on the server:

    /*
    Theme Name: blogolife Child
    Description: Child theme for the blogolife theme
    Author: AG
    Template: blogolife
    */
    
    define('HEADER_IMAGE_HEIGHT, 150);
    }
  24. patv
    Member
    Posted 2 years ago #

    since it's not defined yet

    It's defined in functions/fe/setup.php

    Why wouldn't it be detecting it then?

  25. agfreesafety
    Member
    Posted 2 years ago #

    You can't re-DEFINE a constant in a child without at least triggering a warning (which may or may not be visible). Instead the theme provides a filter than you can use. Try:

    // Change header image height
    function my_new_header_height($height) {
    $height = 150;
    return $height;
    }
    add_filter( 'wplook_header_image_height', 'my_new_header_height' );

    @esmi - are you suggesting that I clear out what I put in the style.css I created for the child theme, and replace it with what you provided above?

    If so, won't it remove the formatting from the Blogolife theme I'm using once I select my child theme from within the wordpress admin panel?

  26. esmi
    Forum Moderator
    Posted 2 years ago #

    are you suggesting that I clear out what I put in the style.css I created for the child theme, and replace it with what you provided above?

    No. First, try adding the code I gave above to a functions.php file in your child theme. If you don't already have such a file, create one using a plain text editor.

  27. agfreesafety
    Member
    Posted 2 years ago #

    No. First, try adding the code I gave above to a functions.php file in your child theme. If you don't already have such a file, create one using a plain text editor.

    Ok, I created a functions.php and placed it in my child theme's folder. My site is still unformatted, because I had to activate the child theme according to the instructions on the codex page for making child themes.

    Two questions:

    1. How can you activate the child theme, yet keep the main theme activated, to keep the page displaying your site using the formatting from your main theme at the same time? How can you have two themes active at the same time?

    2. Below are the contents of the functions.php file I have in my child theme's folder. Does it have everything it needs in it, or do I need to add something?

    <?php
    // Change header image height
    function my_new_header_height($height) {
    $height = 150;
    return $height;
    }
    add_filter( 'wplook_header_image_height', 'my_new_header_height' );
    ?>
  28. radhika
    Member
    Posted 2 years ago #

    @agfreesafety
    If you want to reduce the banner height then add this line in function.php file of your theme.

    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 300 ) );

  29. agfreesafety
    Member
    Posted 2 years ago #

    @agfreesafety
    If you want to reduce the banner height then add this line in function.php file of your theme.

    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 300 ) );

    Thanks! That fixed it. How would I reduce the vertical size of the banner above it? I'd image that the code would be similar.

  30. agfreesafety
    Member
    Posted 2 years ago #

    OK, I'm trying to figure out my last question on my own. I noticed the the div id above the header image when I highlighted it using Firebug was called "header image."

    I highlighted the other portion of the header that I'm trying to reduce (just above the banner), and noticed that the div id above that portion of code is labelled "page."

    So I tried to put "two and two together", and that that I would enter the following into the functions.php:

    define( 'PAGE_HEIGHT', apply_filters( 'twentyeleven_page_height', 300 ) );

    Unfortunately, nothing happened.

    Am I close? I'm trying to make that top part of the banner as small as I can to increase the amount of information a site visitor can see "above the fold."

Topic Closed

This topic has been closed to new replies.

About this Topic