[Resolved] Custom Header

Home Forums Support [Resolved] Custom Header

Home Forums Support Custom Header

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1608833
    ninjajay

    I’m trying to create a custom header layout for singular blog posts and am not sure how to approach it using GP.

    On a single blog post, the header’s background will always have the same image full width.
    The hero section will be merged with the header (so displayed starting under the logo and navigation)

    The page title will be contained in a block around 1200px wide located in the hero section and content and sidebar. The bock that contains the page title will use the featured image as the background.

    #1608837
    ninjajay

    Posting a link to design and single blog

    #1608886
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1608896
    ninjajay

    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.

    #1609106
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1609207
    ninjajay

    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?

    #1609248
    Elvin
    Staff
    Customer Support

    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/

    A wise man once said:
    "Have you cleared your cache?"

    #1610171
    ninjajay

    Thanks for the help!

    #1610176
    Elvin
    Staff
    Customer Support

    Thanks for the help!

    No problem. Glad to be of any help. 😀

    A wise man once said:
    "Have you cleared your cache?"

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