Support » Themes and Templates » [Theme: Twenty Ten] Custom header height not working for featured image

  • Resolved brightgirl


    I am using a child theme with Twenty Ten.

    I successfully customized my header image using the information I found here:

    Then in my child theme’s functions.php I added the following code:

    add_action( ‘after_setup_theme’, ‘child_theme_setup’ );
    if ( !function_exists( ‘child_theme_setup’ ) ):
    function child_theme_setup() {
    define( ‘HEADER_IMAGE_HEIGHT’, apply_filters( ‘twentyten_header_image_height’, 320 ) );

    That succeeded in changing my header image from the standard size of 940 x 198, to a new custom size of 940 x 320. I thought all was well.

    Now, though, I would like to have a different header image for the blog post pages in the site. I thought I could do this simply by uploading a “featured image” to any blog post page. The featured image DOES show up on the blog post when I do that BUT it’s at the old size of 940 x 198 (so when I upload a 940 x 320 image, it crops it and chops off part of the image).

    Is there a different place or method for specifying the height of a featured image??

    I didn’t include a link to the site because I’ve only attempted this in draft/preview mode so far, nothing live. I suppose if I need to make the badly cropped header image live for a bit so you can see it, I could do that, let me know if that would be helpful.

    Thanks in advance. I’m good with HTML and CSS and mildly familiar with PHP, but this is only my 2nd site with WordPress so I’m still learning!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Please show the link to your website.


    I went ahead and published the sample blog page where I attempted to do a different features image and it’s chopping it off at the top:



    Font hero

    Please first upgrade to WP3.5 and then try this

    function mychild_twentyten_header_image_height() { return 320; }
    add_filter('twentyten_header_image_height', 'mychild_twentyten_header_image_height' );

    You can read my thread about the featured image size.

    I think the featured thumbnail is not suitable to do this. You can just do it with CSS. First, you crop the image to the correct size and upload it to your images folder inside your theme directory.

    Then you write some css to show the image as background for that page.
    Here is a sample for your website:

    .postid-904 #branding{ height: 320px; background: url('/path/to/your/image') no-repeat; }

    Note that you need to remove the current image attached to that page first before you start.

    gidd – Thanks! I did get your CSS solution to work, but prior to that CSS I had to add another line:

    .postid-904 #branding img {display: none}

    Otherwise, the regular image that appears on all pages of the site would appear and the background image would not show at all.

    So it works! The only thing I don’t like about it is that it’s going to mean adding to the CSS every time there’s a new blog post and that seems rather inelegant (and not something I’m going to want my client to do on her own, whereas adding a standard “featured image” to every blog post, the client COULD handle). But at least it works!!

    paulwp – I’m not ignoring your post!

    1. I’ll admit that I’m scared to update to 3.5. I’m afraid it’s going to break everything I’ve done so far. As I said, this is only my 2nd site with WordPress, so I’m still feeling tentative about stuff. I have 2 plugins that want me to update them as well.

    2. Once I do get brave enough to update to 3.5, are you sure what you’re suggesting will actually adjust the height of a *featured* image that is in the header position on a blog post. Because if you look at my original post, I already did something similar to set the header image to 320, which works for the main header that is throughout the site, but when I try to use a different *featured* image on a blog post, it doesn’t follow the height of 320 but crops it back to the standard 198.

    Thinking out loud here…

    Since I am going to use the same header image for all blog posts (basically I just want the “blog” section of the site to have a different header than all the other informational pages of the site), would this work?:

    .single-post #branding img {display: none;}
    .single-post #branding {height: 320px; background: url(“pathtoimage”) no-repeat; }

    Assuming that the class single-post applies to just blog postings, that would eliminate the need to use the post id and have to keep adding to the CSS for every post, right?

    Aha, that DID work.

    Now I just have to figure out how to also apply it to the main Blog page without altering the other pages (Home etc)

    Getting closer here… 🙂

    Just adding a duplicate set of instructions with .blog in place of .single-post also takes care of the blog page.

    I think I am set! Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Theme: Twenty Ten] Custom header height not working for featured image’ is closed to new replies.