Support » Themes and Templates » Set feature image as unique header image for pages

  • Hello,

    I would like to display different (but not random) header images on my pages.

    I have created my child theme and created a new template for the pages with the unique header images. I have added extra container <div> with class ‘city’ to this page template.

    I wanted to display the featured image as header image by modifying custom-header.php but it does not work.

    <style type="text/css" id="twentythirteen-header-css">
    <?php
    if ( ! empty( $header_image ) ) :
    ?>
    .site-header {
    background: url(<?php header_image(); ?>) no-repeat scroll top;
    background-size: 1600px auto;
    background-size:100%;
    }
    .city .site-header {
    background:none;
    background-image:url(<?php the_post_thumbnail(); ?>);
    }
    <?php
    endif;
    ...
    </style>

    My solution works when I upload an image and use its full path in the code:
    background-image:url(/wp-content/themes/child-theme/site-images/background-city.jpg);
    instead of
    background-image:url(<?php the_post_thumbnail(); ?>);
    so I think there is some issue in the php.

    Any help is much appreciated! Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • esmi

    (@esmi)

    Forum Moderator

    Have a look at the 2012 theme. It does exactly this sort of thing. You should be able to re-use the code from there in your child theme.

    Hi Esmi,

    Thanks for your reply.

    As far as I can see 2012 theme displays the featured image on the page as a simple image and not as a background image (on front-page.php).

    I would like to set it as a background image in my 2013 theme. So I would like to call it from the css just the same way as the header image is called.

    I think this does not give me the solution for the problem but thanks anyway.

    esmi

    (@esmi)

    Forum Moderator

    Sorry – my bad. That should have been the 2011 theme.

    Still no success.

    I have found the relevant code in 2011’s header.php but I think it does not provide the solution. It seems to me that 2011 theme does not use feature image as background image but as simple image called from the code.

    esmi

    (@esmi)

    Forum Moderator

    You said you wanted to use the featured image (post thumbnail) as the header image for the single Post or Page, yes? That’s exactly what the 2011 theme does.

    Hi Esmi,

    Sorry about coming back so late.

    Yes, I was about to set the featured image as header image, but not the same way as 2011 theme does.

    I use my custom child theme of 2013. My header image is set as a full width background image and called from the css section of custom-header.php as a background image. I would like to keep this structure.

    Theme 2011 is able to set featured image as header image indeed, but as far as I can see it works differently: the header image is not a background image called from the css but a image on the page.

    I have tried to implement the code from theme 2011 but it did not work out in the css. Actually I am not a php coder, so it seems I have to hard-code the page specific header images.

    But anyway thank you very much for your help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Set feature image as unique header image for pages’ is closed to new replies.