WordPress.org

Ready to get started?Download WordPress

Forums

[Theme: Twenty Eleven] Advanced header image techniques (9 posts)

  1. abelluscio
    Member
    Posted 12 months ago #

    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...

  2. paulwpxp
    Font hero
    Posted 12 months ago #

    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.

  3. abelluscio
    Member
    Posted 12 months ago #

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

  4. paulwpxp
    Font hero
    Posted 12 months ago #

    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.

  5. alchymyth
    The Sweeper & Moderator
    Posted 12 months ago #

    correct this non-object notice

    $latest = get_posts("post_type=post&numberposts=1");
    					$latest_id = $latest[0]->ID;
  6. paulwpxp
    Font hero
    Posted 12 months ago #

    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

  7. alchymyth
    The Sweeper & Moderator
    Posted 12 months ago #

    @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...

  8. paulwpxp
    Font hero
    Posted 12 months ago #

    @alchymyth thanks a lot for clearing that up.

  9. abelluscio
    Member
    Posted 11 months ago #

    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.

Reply

You must log in to post.

About this Topic