WordPress.org

Support

Support » Themes and Templates » [Resolved] Twenty Eleven header image resize not working

[Resolved] Twenty Eleven header image resize not working

  • Disclaimer: I am no programmer, but I can read/troubleshoot code.

    I’ve read various posts on how to change the header image size on Twenty Eleven theme (v3.4.1). My logo is 375px X 50px. I have updated the following code in the functions.php file to reflect the size change to these dimensions:

    // Add support for custom headers.
    	$custom_header_support = array(
    		// The default header text color.
    		'default-text-color' => '000',
    		// The height and width of our custom header.
    		'width' => apply_filters( 'twentyeleven_header_image_width', 375 ),
    		'height' => apply_filters( 'twentyeleven_header_image_height', 50 ),
    		// Support flexible heights.
    		'flex-height' => true,
    		// Random image rotation by default.
    		'random-default' => true,
    		// Callback for styling the header.
    		'wp-head-callback' => 'twentyeleven_header_style',
    		// Callback for styling the header preview in the admin.
    		'admin-head-callback' => 'twentyeleven_admin_header_style',
    		// Callback used to display the header preview in the admin.
    		'admin-preview-callback' => 'twentyeleven_admin_header_image',
    	);
    
    	add_theme_support( 'custom-header', $custom_header_support );

    Also, in Appearance > Header, the recommended image size says, “You can upload a custom header image to be shown at the top of your site instead of the default one. On the next screen you will be able to crop the image.
    Images should be at least 375 pixels wide. Suggested width is 375 pixels. Suggested height is 50 pixels.” This tells me that WP is recognizing my desired image size.

    Yet when I publish the content, it stretches my header across the body of the page (I assume the default 1000px wide), though it is shorter than the other images pre-loaded on the Twenty Eleven theme.

    How can I reduce the width of the image displayed to 375 pixels?

    Thanks for the help.

    Website: brandxgoods.com

Viewing 10 replies - 1 through 10 (of 10 total)
  • esmi

    @esmi

    Forum Moderator

    Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

    Ah. I suppose I’ll start there. Thanks for the direction. Thanks for the link.

    OK, so I’ve got the files set up for a child theme, including the changes I wanted made to the new child functions.php file (for image header dimensions).

    The page linked to above says to use the get_stylesheet_directory() function to find the files I’ve created, but it doesn’t say where to place this function. Any help?

    Thanks.

    EDIT: This is where my ignorance shines: I just realized I simply have to activate the new child theme on my site. I’ll save the other new people the embarrassment of asking for themselves and post my folly for the world to see.

    Thanks again.

    @aikorei: could you please put down the code that you used in your child’s functions php and/or any other code you used to make it work? I did put the underneath code in my child’s functions.php, yet still have the problem as you mentioned at first. In the Appearance > Header it even shows the preview in the right dimensions, but on the actual page it shows stretched to 1000px.

    $defaults = array(
    	'default-image'          => '',
    	'random-default'         => false,
    	'width'                  => 370,
    	'height'                 => 175,
    	'flex-height'            => false,
    	'flex-width'             => false,
    	'default-text-color'     => '',
    	'header-text'            => true,
    	'uploads'                => true,
    	'wp-head-callback'       => '',
    	'admin-head-callback'    => '',
    	'admin-preview-callback' => '',
    );
    add_theme_support( 'custom-header', $defaults );

    @NelliBird – You’re probably not going to like my answer very much, but I looked back over all of my files to see how I did it (because my image looks exactly how I want it to), and I never did overcome WP stretching my image to 1000px.

    My work-around was to create my 375px image over a simple 1000px wide background that was the same color as the background of my site. So my image *looks* like it’s only 375px wide, but the image as a whole is actually the entire 1000px. Done without a border, you can’t tell where the header image stops and the background starts, except for the fact that my header image is linkable across the entire 1000px.

    I seem to recall getting this idea right around the time I created the child theme and my image was still giving me problems. Quite frankly, I didn’t think it worth the hassle. This is where I will again say I’m no programmer, but a bit of creativity usually gets me where I need to be.

    Not sure if that’ll help or not, but good luck.

    Thx aikorei for your reply. In the mean time I’ve worked out something that does what I want: I pasted the code below in my functions.php, and in addition to that I placed a div around the header img in my header.php. I gave the div the exact dimensions of what I want the pic to be. That did it.

    remove_filter( 'HEADER_IMAGE_WIDTH', 'twentyeleven_header_image_width' );
    remove_filter( 'HEADER_IMAGE_HEIGHT', 'twentyeleven_header_image_height' );
    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'child_header_image_width', 370 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'child_header_image_height', 175 ) );

    For those of us with smaller sized brains, what do you mean by ‘placed a div around the header img in my header.php’? I mean, exactly what code have you added to your header.php, and where? Would appreciate a reply muchly!

    Thanks,
    Leo

    It doesn’t mean you have a smaller sized brain, just less knowledge. I placed a container (div) around my header image in header.php, and gave it the id=header_container. You can see it in the code below (the first and last line):

    <div id="header_container">
    
    	<?php
    				// Check to see if the header image has been removed
    				$header_image = get_header_image();
    				if ( $header_image ) :
    					// Compatibility with versions of WordPress prior to 3.4.
    					if ( function_exists( 'get_custom_header' ) ) {
    						// We need to figure out what the minimum width should be for our featured image.
    						// This result would be the suggested width if the theme were to implement flexible widths.
    						$header_image_width = get_theme_support( 'custom-header', 'width' );
    					} else {
    						$header_image_width = HEADER_IMAGE_WIDTH;
    					}
    					?>
    			<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 :
    						// Compatibility with versions of WordPress prior to 3.4.
    						if ( function_exists( 'get_custom_header' ) ) {
    							$header_image_width  = get_custom_header()->width;
    							$header_image_height = get_custom_header()->height;
    						} else {
    							$header_image_width  = HEADER_IMAGE_WIDTH;
    							$header_image_height = HEADER_IMAGE_HEIGHT;
    						}
    						?>
    					<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() ) :
    			?>
    
    				</div>  <!-- #header_container -->

    Then I gave the header_container its dimensions and position in my (child)theme’s style.css:

    #header_container {
    	position: absolute;
    	top: 10px;
    	left: 380px;
    	width: 370px;
    	height: 175px;
    	z-index: 9999;
    }

    Hope that helps!

    Works now. Thanks very much 🙂

    Great!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Resolved] Twenty Eleven header image resize not working’ is closed to new replies.
Skip to toolbar