Support » Theme: Twenty Eleven » [Theme: Twenty Eleven] Make Featured Image Header a Background

  • Resolved Wilds

    (@wilds)


    I want to make it so that when a Featured Image is displayed in the header that it is a background with the site title over it instead of being a link.

    I’ve already achieved this with the randomly chosen standard header images by changing this piece of code in header.php

    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

    into this:

    <div style="background-image: url(<?php header_image(); ?>); width: <?php echo HEADER_IMAGE_WIDTH; ?>px; height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;">	<hgroup>
    				<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
    				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    			</hgroup>
    </div>

    I am unsure how to edit the code for the Featured Images to achieve the same effect though.

    I do know that I have to edit this:

    <?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 : ?>

    Thanks in advance to anyone that can help me with this.

    http://wordpress.org/extend/themes/twentyeleven/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Wait, I figured it out myself.

    <?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!
    						 ?> <div style="background-image: url('<?php echo $image[0]; ?>'); width: <?php echo $image[1]; ?>px; height: <?php echo $image[2]; ?>px;"><hgroup>
    				<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
    				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    			</hgroup></div>
    					<?php else : ?>

    Ok well you got the answer yourself, but I didn’t get you. Can you give me live url if you have implement these code on your website? Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Theme: Twenty Eleven] Make Featured Image Header a Background’ is closed to new replies.