Allowing Smaller Featured Images to Still Work as Header Image in a TwentyTen Child Theme

So by now I’m sure we all realize that when you select a featured image for a page or a post using the twentyten theme, it becomes the header image for that page, or the single view of that post.  But what if your picture is too small?  Well, we can fix that in a child theme.  Check it out!

So the default image size in twentyten is 940px wide and 198px tall.  And if you followed our tutorial earlier, yours may be even larger!  But what if you use a smaller image?  Well by default, it’s ignored.  It just plain doesn’t work.  It never shows up.  Well, I didn’t like that behaviour!  I want smaller images to work.  Luckily there is a quick fix in a child theme.

This allows smaller images to be used.  It will resize your header (at least the height) and allow your smaller image to show up.

Now, normally I try any way I can to avoid hauling templates from the parent theme over to the child theme.  I like to use hooks, functions, filters, etc, anythign I can to avoid that.  But from the start I made a concession for header.php.  To do all the stuff I wanted, I was basically rewriting a large portion of it anyway.  So I copied twentyten’s header.php to my child theme.  Remember that any template you copy from the parent theme to a child theme will be used first.  So by copying header.php to my child theme, twentyten’s is no longer used, mine is.  So to accomplish what I’m going to show you here, you will need to do the same.  Because remember, we never edit the parent theme.

So in header.php we see this line:

// 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 ), 'post-thumbnail' ) ) &&
							$image[1] >= HEADER_IMAGE_WIDTH ) :
						// Houston, we have a new header image!

That sets up the checks for the featured image to be used as the header.  We can simply modify it a tiny little bit so it looks like this:

					// 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 ), 'post-thumbnail' ) ) ) :
						// Houston, we have a new header image!

And presto, we’ve removed the size check.  You can see it in action in this post! That image is only 230×48. But there it is. You may need to play around in the css if you are going to allow this. For instance changing image alignment, or background colour. One thing I modified was to add a wrapper div to the image, set a width to it, and move the borders from the image to the wrap. I liked the twentyten borders, but they only extend to the size of the image. So with smaller images it looked bad. You can see in this post that by moving them to the wrapper, they again extend the full width. Here’s my sample code, note that my width is much wider than twentyten. I’ve adjusted my theme to be 1010px wide, twentyten is only 940px, so adjust accordingly.

				<div id="headwrap">
				<?php
					// 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 ), 'post-thumbnail' ) ) ) :
						// 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; ?>
				</div><!-- #headwrap -->

Is my full header image code with the wrap in place, and:

/* This is the custom header image */
#branding #headwrap {
	width: 1010px;
	border-top: 4px solid #000;
	border-bottom: 1px solid #000;
}

#branding img {
	display: block;
	float: left;
}

Is my adjusted css. Hopefully this gives you some ideas of things you can play with! Don’t be afraid to go crazy, have some fun with the theme. That’s a lot of the fun with child themes. Edit all you want. If it doesn’t work, you can easily delete your file and twentyten’s will take over!

2 Replies to “Allowing Smaller Featured Images to Still Work as Header Image in a TwentyTen Child Theme”

Leave a Reply