Topic: Custom header with Page Hero – Featured Image

makau

April 16, 2024 at 2:21 am

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":"https://jugendarbeit-oberhaid.de/wp-content/uploads/2024/02/ojo_header-disco_70.jpg","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.

Greetings

David
April 16, 2024 at 3:54 am

Hi there,

where is this hero header for ?
e.g a Single Post in a specific category
makau
April 16, 2024 at 4:57 am

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.

Greetings
David
April 16, 2024 at 5:55 am

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.
makau
April 17, 2024 at 11:28 am

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
Ying
April 17, 2024 at 1:28 pm

Do you mean the post belongs to 2 categories at the same time?
makau
April 17, 2024 at 9:15 pm

Yes exactly
David
April 18, 2024 at 5:25 am

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.
makau
April 18, 2024 at 5:45 am

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?
David
April 18, 2024 at 6:16 am

And what happens if the post has other Categories eg. ANOTHER but NOT Holiday ?
makau
April 18, 2024 at 6:32 am

All other Categories use now the featured Image.

Holiday is the only one who has a custom Image.
David
April 18, 2024 at 7:33 am
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
makau
April 18, 2024 at 10:56 am

Thank you! Im not 100% sure where I should add the php snipped. functions.php? or elsewhere?
Ying
April 18, 2024 at 11:51 am

You can use one of the methods introduced here: https://docs.generatepress.com/article/adding-php/
makau
April 18, 2024 at 12:32 pm

Thank you very much!

Now I understood how it works.

Keep up this awesome work and fast support!

Greetings

Martin
Ying
April 18, 2024 at 3:29 pm

You are welcome 🙂

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Custom header with Page Hero – Featured Image