Custom Header

Posting a link to design and single blog

The hero section will be merged with the header (so displayed starting under the logo and navigation)

This should be easily doable with either the Header Element.
https://docs.generatepress.com/article/header-element-overview

Or the Block Element.
https://docs.generatepress.com/article/block-element-overview/

Will the hero section image text and image be dynamically changing depending on the archive category as well or is this a design solely intended for the Blog index page?

Let us know.

Hi Elvin,

The design is the single post template.

The hero section text ("LOREM IPSUM DOLOR SIR AMET" in the design) is the blog post title and the image in the background (man in the brown jacket) is the featured image. So both the image and the text are dynamic.

What I'm trying to work out is how to dynamically change the featured image. My guess is that Block Element content isn't dynamic, so the header Element is the correct one to use.

Oh right my bad.

Let's change the markup placed on your hero code area a bit where:

<div style="width: 100%; height: auto; position:relative;">
	<h1 class="hero-post-title">
	{{post_title}}
  </h1>
{{custom_field._thumbnail_id}}
</div>

<style>
	.page-hero img{ border-radius: 20px; margin: 50px auto; width: 100%; height: 100%; }
	h1.hero-post-title{ color: #fff; position:absolute; bottom: 5%; left: 5%; }
</style>

You then style the .page-hero's background-size and background-position CSS property to match your mockup. You may have to also resort to custom CSS for this as you'll most likely need to create a separate media rule for your mobile viewport.

Hi Elvin,

Thanks for the help so far, I'm getting close now. Is there a way to display a larger version of the featured image? Does {{custom_field._thumbnail_id}} render the image in the themes thumbnail style e.g. small?

You'll have to add_filter using generate_hero_thumbnail_id_size for that.

See Tom's reply here on its usage:
https://generatepress.com/forums/topic/how-to-place-h1-page-title-and-featured-image-in-the-header/page/2/#post-838956

Or David's answer here:
https://generatepress.com/forums/topic/blog-post-makeover/

Thanks for the help!

Thanks for the help!

No problem. Glad to be of any help. :D