[Theme: Twenty Eleven] Advanced header image techniques

  • So I was fiddling around with the Twenty Eleven theme. I was turning it into my own custom theme (as it makes for a great starting point). As anyone can figure out, Twenty Eleven has the following code pertaining to header images in header.php:

    <?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 the_title(); ?>" />
				<?php endif; // end check for featured image or standard header ?>
			</a>
			<?php endif; // end check for removed header image ?>

    Now, I want to have it such that if I do not have a custom, site-wide header enabled, WordPress will grab the post-thumbnail from the most recent article that has a featured image set to use as the header image.
    How would I do that? I’m not good enough with php to just invent something. I tried adding stuff to the default code, but it just made the header image stop displaying…

Viewing 8 replies - 1 through 8 (of 8 total)

  • Now, I want to have it such that if I do not have a custom, site-wide header enabled, WordPress will grab the post-thumbnail from the most recent article that has a featured image set to use as the header image.

    TwentyEleven already does that, it is the theme’s feature.

    When you make a post, make sure you assign a featured image to that post, AND make sure the image’s width is 1000px or wider.

    Thread Starter Alexander Bell

    (@abelluscio)

    It does that on post pages, but not on the blog/home page.

    Ahh I’m sorry, I misread the topic.

    So we get the latest post’s id and then the the post thumbnail from that post id the same way it does for singular and append the else if condition.

    Try putting this in header.php of child theme.

    Notice
    the beginning line: </hgroup>
    and ending line: // Has the text been hidden?

    </hgroup>

			<?php
				// Check to see if the header image has been removed
				$header_image = get_header_image();
				if ( $header_image ) :
				$header_image_width = get_custom_header()->width;
				$header_image_height = get_custom_header()->height;
					?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php
					// Get latest post id for used in archive
					$latest = get_posts("post_type=post&numberposts=1");
					$latest_id = $latest->ID;
					// 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_height ) ) ) &&
							$image[1] >= $header_image_width ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					// Check if this is archive or home, if it has a thumbnail, and if it's a big one
					elseif  ( ( is_archive() || is_home() ) && has_post_thumbnail( $latest_id ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $latest_id ), array( $header_image_width, $header_image_height ) ) ) &&
							$image[1] >= $header_image_width ) :
						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?

    This code is tested, it works but with debug on I get a “Notice: Trying to get property of non-object” on how the get post’s id using get_posts().

    Someone might help correct this non-object notice, or a better way to get the latest post’s id.

    correct this non-object notice

    $latest = get_posts("post_type=post&numberposts=1");
					$latest_id = $latest[0]->ID;

    Hi alchymyth,

    I did that before, but it didn’t work (can’t figure out why).

    With $latest_id = $latest[0]->ID; the id will always return 1

    @paulwpxp
    seems to return the right post ID (checked by printing it, in my local test site)- however, the conditional does not seem to get reached if the header image is set to ‘remove header image’, and it does not seem to trigger the right header image.
    this would get the ID of the latest post with a thumbnail:

    $latest = get_posts(array('post_type'=>'post','posts_per_page'=>1,'meta_key'=>'_thumbnail_id'));
$latest_id = $latest[0]->ID;

    @abelluscio

    if I do not have a custom, site-wide header enabled, WordPress will grab the post-thumbnail from the most recent article that has a featured image set to use as the header image

    does this mean, you have ticked ‘remove header image’ under dashboard – appearance – header?
    and you want site wide to show the featured image of the latest post with a featured image, with the minimum image size checked?
    and also the featured image of individual posts or pages? or always the first post’s image?

    in any case, the solution will need to have a row of conditional checks to allow for all the eventualities.
    please describe in all details how you would like to generate the header image…

    @alchymyth thanks a lot for clearing that up.

    Thread Starter Alexander Bell

    (@abelluscio)

    Wow, thanks for the responses.

    So, to clarify, I want to have it so that if you set a header image in theme settings, then it will just use that. But if you don’t have a header image set, it would use the most recently published post-with-a-featured-image as the site-wide header image. I’m not sure if it would be better to have a stock image as a default header-image if no posts have a featured image AND the header image is not set in theme settings, or if it would be better to force the first image in a post to be the featured imaged if none is explicitly set, but having a fall back, I’m sure would be important.
    I also like the idea of keeping a post’s featured image as the header image on the post page. I think that’s more interesting.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Theme: Twenty Eleven] Advanced header image techniques’ is closed to new replies.