WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Ten Header Image modification (24 posts)

  1. argh
    Member
    Posted 3 years ago #

    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

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    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.

  3. argh
    Member
    Posted 3 years ago #

    That was a close one! Thanks!

    Ok, I'm doing that now - any tips on the other two things? :)

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    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.

  5. argh
    Member
    Posted 3 years ago #

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

  6. oturia
    Member
    Posted 3 years ago #

    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?

  7. argh
    Member
    Posted 3 years ago #

    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-940x198.jpg

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

    Thanks!

  8. argh
    Member
    Posted 3 years ago #

    Oh, and it would be different on each post.

  9. oturia
    Member
    Posted 3 years ago #

    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.

  10. argh
    Member
    Posted 3 years ago #

    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?

  11. oturia
    Member
    Posted 3 years ago #

    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.

  12. argh
    Member
    Posted 3 years ago #

    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; ?>
  13. oturia
    Member
    Posted 3 years ago #

    So did that fix it?

  14. argh
    Member
    Posted 3 years ago #

    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!

  15. oturia
    Member
    Posted 3 years ago #

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

    Let me know if that works.

  16. argh
    Member
    Posted 3 years ago #

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

    Unfortunately it just links to the post permalink still.

  17. oturia
    Member
    Posted 3 years ago #

    Well, we're getting closer. Try this:

    wp_get_attachment_image_src($attachment_id, 'full', false)

  18. argh
    Member
    Posted 3 years ago #

    Still no luck sorry.

    Thanks again for your help!

  19. argh
    Member
    Posted 3 years ago #

    Anyone else have any ideas?

  20. argh
    Member
    Posted 3 years ago #

    Bump!

  21. oturia
    Member
    Posted 3 years ago #

    Please repost the latest code you are using in the header. I'll throw up a twentyten install and test it out.

  22. argh
    Member
    Posted 3 years ago #

    Thanks so much!

    My current header.php is:

    [Moderator note: snipped code block, please use the pastebin as per the Forum Guidelines]

  23. argh
    Member
    Posted 3 years ago #

  24. argh
    Member
    Posted 3 years ago #

    Any luck Oturia? :)

Topic Closed

This topic has been closed to new replies.

About this Topic