WordPress.org

Support

Support » Themes and Templates » Twenty Ten Header Image modification

Twenty Ten Header Image modification

  • I am using the Twenty Ten theme, and was wondering if anyone has recommendations on how I can do the two following things:

    1. Link the Header Image to the full size image. I have tried doing this through the image info itself (description, etc), but it hasn’t helped. I’m guessing I will have to modify the theme..

    2. When the cursor rolls over the Header Image, it displays the full image, as opposed to the cut down image. It would be similar to this (http://www.nsftools.com/tips/ImageResize.htm), except only 1/3 of the image would show at first, and then it would open up to the full size.

    Any help is greatly appreciated!

    Thanks

Viewing 15 replies - 1 through 15 (of 23 total)
  • esmi

    @esmi

    Forum Moderator

    Don’t edit the Twenty Ten theme! Your changes will be over-written the next time you upgrade WordPress or the theme. For this reason, it is recommended that you consider creating a child theme for your customisations.

    That was a close one! Thanks!

    Ok, I’m doing that now – any tips on the other two things? 🙂

    esmi

    @esmi

    Forum Moderator

    With the exception of some single post pages, the header image is displayed “as is”. In other words, there isn’t a larger, un-cropped, version in the Media Library to link to.

    Hi esmi – are you sure about that?

    In my case there most definitely is. I uploaded an image for a post, and the full image is available on my site, however only the header image is displayed. While I can also add it inline to the post, I don’t really want the image displaying twice..

    So you want the header image to link to the larger version of that image?

    Do you have a different image on each page/post or is there just one instance of what you are trying to accomplish?

    Can you post a link for us to check it out?

    Ok so to make this clearer..

    www_dot_ridemorebikes_dot_com/stoked-transition-bikes/ displays the following header image:

    www_dot_ridemorebikes_dot_com/wp-content/uploads/2011/01/transition-bikes-tr450-double-bank-940×198.jpg

    I would like that image to link to:
    www_dot_ridemorebikes_dot_com/stoked-transition-bikes/transition-bikes-tr450-double-bank/

    Thanks!

    Oh, and it would be different on each post.

    OK, this can be done but it’s not a simple fix.

    The core functionality of the header image rests in the header.php file:

    <?php
    // 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 ), 'post-thumbnail' ) ) &&
    $image[1] >= HEADER_IMAGE_WIDTH ) :
    // Houston, we have a new header image!
    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; ?>

    Without messing around in the functions file, this would be the easiest place to wrap an <a> in there. I don’t really know how your blog is set up, else I might be able to help more, but this would be able to at least get you started in the right direction.

    Hi Oturia,

    That is what I was thinking.. I need to <a> the <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /> line.

    Any idea what <?php> tag would I use to link to the image page?

    Hmmm. I would try this:

    <?php get_the_attachment_link($post->ID, false); ?>

    I’m not in a place where I can test that, but if you do some research by Googling get_the_attachment_link I’m sure you’ll find a similar or better example.

    That is getting close. It links back to the page that the attachment is on. It’s setup on the site now if you want to check it out.

    I had to do it like this:

    <a href="<?php get_the_attachment_link($post->ID, false); ?>">
    				<?php
    					// 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 ), 'post-thumbnail' ) ) &&
    							$image[1] >= HEADER_IMAGE_WIDTH ) :
    						// Houston, we have a new header image!
    						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; ?>
    				</a>

    Like this didn’t work:

    <?php
    					// 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 ), 'post-thumbnail' ) ) &&
    							$image[1] >= HEADER_IMAGE_WIDTH ) :
    						// Houston, we have a new header image!
    						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
    					else : ?>
    						<a href="<?php get_the_attachment_link($post->ID, false); ?>"><img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /></a>
    					<?php endif; ?>

    So did that fix it?

    Unfortunately no, it just links to the post.

    Eg:

    On www_dot_ridemorebikes_dot_com/stoked-transition-bikes/, it links to www_dot_ridemorebikes_dot_com/stoked-transition-bikes/, rather than the image page which is www_dot_ridemorebikes_dot_com/stoked-transition-bikes/transition-bikes-tr450-double-bank/.

    Thanks for the help by the way!

    OK, why don’t you try wp_get_attachment_image_src instead of get_the_attachment_link.

    Let me know if that works.

    So I am currently using <?php wp_get_attachment_image_src($post->ID, false); ?>.

    Unfortunately it just links to the post permalink still.

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘Twenty Ten Header Image modification’ is closed to new replies.
Skip to toolbar