WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
[resolved] Make Featured Image Header a Background (3 posts)

  1. Wilds
    Member
    Posted 2 years ago #

    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/

  2. Wilds
    Member
    Posted 2 years ago #

    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 : ?>
  3. Prerak Trivedi
    Member
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic