Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Custom header with Page Hero – Featured Image

  • Hi I designed a custom Header for every Site. For Blogposts I have one too. But for a special Category I would like to use the featured Image as Background Image shown in the Header.

    But I don’t know how to exchange the “bgImage” with the feature image in the code. Because with the wysiwyg-editor I can’t change it.

    My Header Block-Code is:

    <!-- wp:generateblocks/container {"uniqueId":"6508c824","backgroundColor":"var(\u002d\u002dcontrast)","bgImage":{"id":628,"image":{"url":"","height":1280,"width":1920,"orientation":"landscape"}},"bgOptions":{"selector":"pseudo-element","opacity":0.46,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"innerZindex":1,"shapeDividers":[{"shape":"gb-angle-1","color":"var(\u002d\u002daccent)","colorOpacity":1,"location":"top","height":90,"heightTablet":"","heightMobile":"","width":100,"widthTablet":"","widthMobile":"","flipHorizontally":false,"zindex":3},{"shape":"gb-angle-1","color":"var(\u002d\u002daccent-2)","colorOpacity":1,"location":"top","height":130,"heightTablet":"","heightMobile":"","width":100,"widthTablet":"","widthMobile":"","flipVertically":true,"zindex":1,"flipHorizontally":false},{"shape":"gb-angle-1","color":"var(\u002d\u002dbase-2)","colorOpacity":1,"location":"top","height":150,"heightTablet":"","heightMobile":"","width":100,"widthTablet":"","widthMobile":"","flipVertically":true,"flipHorizontally":false,"zindex":null},{"shape":"gb-angle-1","color":"var(\u002d\u002daccent-3)","colorOpacity":1,"location":"top","height":110,"heightTablet":"","heightMobile":"","width":100,"widthTablet":"","widthMobile":"","flipHorizontally":false,"zindex":2}],"isDynamic":true,"blockVersion":4,"position":"relative","sizing":{"height":"","maxWidth":""},"typography":{"textAlign":"center"}} -->
    <!-- wp:generateblocks/container {"uniqueId":"fcd03a4b","isDynamic":true,"blockVersion":4,"display":"flex","alignItems":"center","justifyContent":"center","position":"relative","zindex":1,"sizing":{"maxWidth":""},"useGlobalMaxWidth":true,"spacing":{"paddingTop":"200px","paddingRight":"40px","paddingBottom":"200px","paddingLeft":"40px","marginRight":"auto","marginLeft":"auto","paddingTopTablet":"140px","paddingBottomTablet":"140px","paddingTopMobile":"100px","paddingRightMobile":"30px","paddingBottomMobile":"100px","paddingLeftMobile":"30px"}} -->
    <!-- wp:generateblocks/container {"uniqueId":"7b6381d5","backgroundColor":"var(\u002d\u002dbase-2)","isDynamic":true,"blockVersion":4,"flexBasis":"20px","sizing":{"minHeight":"4px","height":"100%","maxWidth":""}} /-->
    <!-- wp:generateblocks/headline {"uniqueId":"9126ac98","element":"h1","blockVersion":3,"spacing":{"marginBottom":"0px"},"textColor":"var(\u002d\u002dbase-2)","gpDynamicTextType":"title","gpDynamicTextReplace":"Hello World"} -->
    <h1 class="gb-headline gb-headline-9126ac98 gb-headline-text">Hello World</h1>
    <!-- /wp:generateblocks/headline -->
    <!-- wp:generateblocks/container {"uniqueId":"c2e6ed4d","backgroundColor":"var(\u002d\u002dbase-2)","isDynamic":true,"blockVersion":4,"flexBasis":"20px","sizing":{"minHeight":"4px","height":"100%","maxWidth":""}} /-->
    <!-- /wp:generateblocks/container -->
    <!-- /wp:generateblocks/container -->

    Hope you can help me with that.


  • Hi there,

    where is this hero header for ?
    e.g a Single Post in a specific category

  • Hi!
    I use a few different shapes for a nice design as an overlay above my header image.

    For every site i use a different header.

    For blog posts right now I have one for all. But for my category „events“ I want to use the featured image of the blog post instead of the fixed one. And I don’t want to create a new page hero element for every event post.

    Hope this answered your question.


  • Ok, so you would:

    1. create a new Block Element – Page Hero
    2. set the Display Rules > Location to: Post Category -> the category term
    This will apply to ALL singles posts in that category.
    3. in the editor build your hero and using the visual editor select the Container Block that has the background image.
    3.1 in the block settings sidebar, activate the Dynamic Data and set the Background Image Source to Featured Image.

  • That worked perfect! Thank you very much.

    I have another “problem” I have 2 Categorys that doesn’t work together.

    I want for the Category “Holidays” a preset background image in the header (this works) and the feature image upon it (this works)

    Now it gets tricky (at least for me)

    If I add the blog post to another Category “last holidays” I want it to switch to the featured image and ignore the settings of the category “Holidays” (how I set up the featured image I do know)

    Can you tell me how to set this up?

    Greetings Martin

  • Do you mean the post belongs to 2 categories at the same time?

  • Yes exactly

  • Just so i understand:

    Hero A – Only Holiday Category
    Has static image background

    Hero B – Has Holiday + Another Category
    Has a Featured Image background

    Is that the only difference ? ie. the background changes.

  • Yes! Hero A and B

    And if I add the Category “Another” to “holiday” I would like to use the featured image (Hero B and ignore Hero A)

    I could just change the category to make it work. But in the Search for Categorys I want it be listed in both.

    Can you help me with this?

  • And what happens if the post has other Categories eg. ANOTHER but NOT Holiday ?

  • All other Categories use now the featured Image.

    Holiday is the only one who has a custom Image.

  • Ok, so you will need to create 2 x Page Heroes.
    One for the Holiday only category and set its display rules to: Post Category -> Holiday.
    Make a note of the Element ID ( found in the editor, browser URL field )
    And a separate hero for for the All Posts.

    At this point when you view a post in the Holiday category you will see both heros.

    Now add this PHP Snippet:

    add_filter( 'generate_element_display', function( $display, $element_id ) {
        if ( 100 === $element_id ) {
            $post_categories = get_the_category();
            if (count($post_categories) > 1) {
                $display = false;
        return $display;
    }, 10, 2 );

    Change the 100 to the ID of the Holiday category Element.
    If the post has more than one category that function will remove the holiday element

  • Thank you! Im not 100% sure where I should add the php snipped. functions.php? or elsewhere?

  • You can use one of the methods introduced here:

  • Thank you very much!

    Now I understood how it works.

    Keep up this awesome work and fast support!



  • You are welcome   🙂

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.