Twenty Eleven header image resize not working

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!