WordPress.org

1. Wilds
   Member
   Posted 1 year 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 1 year 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 1 year 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.