Hero Image in Block Theme spanning behind header into upper part of content area

  • Resolved abitofmind

    (@abitofmind)


    1 year, 8 months ago

    Requirements

    1. MUST: Want to use a block theme (for easy styling and layout customizations).
    2. MUST: Hero image for pages (not blog-posts, there this would be covered with the featured image and a proper template)
    3. MUST: Individually decide per page whether is uses hero or not.
    4. MUST: Featured Image or Individual Image
    5. OPTIONALLY: Video which loops.
    6. MUST: Hero content spans

      a) from viewport top (starting at more/less body > div.wp-site-blocks which uses the theme’s global padding setting)

      b) behind header (header.wp-block-template-part which may be transparent or semi-transparent or opaque)

      c) until upper part of of content area (main.wp-block-group).
    7. MUST: Custom dimensions per each hero image/video instance.

      a) Width (mostly full body, but want the possibility to set this to content-width or wide-width (and fill rest with bg-color) ).
      b) Min-Height + Focal Point of image within container

      Note: Cover block does a + b perfectly.

      c) OPTIONAL: Fixed Aspect Ratio

    What I encountered and tried so far

    1. Plenty classic non-block themes with a tall header (ca 30-50vh) which combine main-menu + page-title + featured image as background image behind the whole header area.
      Usually coming with two page template variants like page-with-hero and page-without-hero or a “? Use Hero” toggle option in the Inspector Panel > Page, so that you can decide on a page to page basis. E.g. Blocksy (in the demo: different hero image per pages: Home, Services, Menu)
    2. In block themes it is easy to simply have no fixed title element in your page template and then individually per page put a cover block (using alignment = full-width, min-height as appropriate, e.g. 60vh) and put a title (semantically a div, cannot be changed) on top of the cover, or a h1 later in the page flow, what better suites the content/presentation.

      a) But how do I get the content — which holds the hero-cover and everything else that follows — behind the header? Negative top margin? UI does not accept negative values. So I would add custom CSS to the block theme with Styles → Custom CSS (implemented in Gutenberg 14.8, will be in WordPress Core 16.2. So for now I tried in the web browser DevTools: main.wp-block-group gets margin-top = - 20rem (offset value compensating header-height plus and global .wp-site-blocks paddings. → Does not work well → stacking context issues (fiddled with z-index of header and main.wp-block-group to no avail.

      b) Even if that would work, with clamp() on the global margins, the header offset compensation strategy won’t work (or gets harder).

      c) Is the solution to put the hero image in the header template with the Site Editor? But then I cannot edit it page per page in the WordPress Block Editor.

      d) Is this only solve-able with block themes which foresee this need? d1) By wrapping the header and the content area into new element or
      d2) Utilizing the existing common parent element div.wp-site-blocks and make it into a flex-container, which is set up in a way where the header area simply sits on top of the upper content-area?

    What’s the clean way to do this in a block theme? And are there any already built that way?

    • This topic was modified 1 year, 8 months ago by abitofmind.
Viewing 5 replies - 1 through 5 (of 5 total)
  • lisa

    (@contentiskey)

    I would look at creating Block Patterns or Block Variations to keep things flexible on a per page basis. There are resources available in WordPress.tv (i.e. builder basics – nick diego) that might give some ideas. https://wordpress.tv/speakers/nick-diego/

    More resources:

    There is a group that is discussing block themes: https://make.www.ads-software.com/themes/2023/03/03/hallway-hangout-community-themes-initiative/

    You might find this video gives ideas –it’s block theme specific but very detailed: https://www.youtube.com/watch?v=OU5liFJcvMs

    Full Site Editing: https://fullsiteediting.com/ (there is also a slack group)

    Thread Starter abitofmind

    (@abitofmind)

    Thanks! Will look into these sources.

    Thread Starter abitofmind

    (@abitofmind)

    Your given sources were very general, not answering the question in particular. But nevertheless thanks, some of Nick Diego’s videos handle block theme layouting in quite some detail, so hopefully I will find it along watching them.

    If anyone else has particular recommendations how to achieve a hero spanning behind header and upper content area on a page to page basis as stated in the requirements — appreciating further hints! Thanks!

    • This reply was modified 1 year, 8 months ago by abitofmind.
    • This reply was modified 1 year, 8 months ago by abitofmind.
    Thread Starter abitofmind

    (@abitofmind)

    I found a solution. The basic HTML from a block theme is:

    <body>

<div class="wp-site-blocks">

<header class="wp-block-template-part"></header>

<main class="is-layout-flow wp-block-group" id="wp--skip-link--target">

<!-- Post Title Block-->

<!-- Post Content Block -->

<!-- Comment Block -->

</main>

<footer class="wp-block-template-part"></footer>

</div>

</body>

    Achieving the goal is:

    • easily possible with the Greenshift Block Theme
    • and certainly also possible with a child theme of TT3 with a modified theme.json and Additional CSS.

    With the Greenshift Block Theme:

    1. The theme comes with a template called “Page without title”. In this case the content area aka <main> only has a Post Content Block and has no Post Title block and no Comment block.
    2. In the Site Editors left Structure Panel select the Header. In the right panel select: Block > Advanced > Transparent Header: Set it to ON.

      This “pulls” the upper content area behind the header by this CSS change: To the <header> it adds class .site-header which has these attributes
    .site-header {
  position: absolute;  
  left: 0;
  right: 0;
  top: 0;
}

    You are done. If you additionally want the header sticky:

    • Site Editor → Structure Panel (left panel) → Header → top Group block.
    • Site Editor → Inspector Panel (right panel) → Block > Advanced > Sticky to Head on scroll: Set it to ON.

    What this does: Has a minimal JavaScript which is scrolling is not top (0px) sets a utility class .gs-sticky-enable on <header> which changed the position to fixed:

    .gs-sticky-enable.site-header {
  position: fixed ;
}

    With any block theme, certainly also TT3:

    1. Make sure your page template contains no Title block. Then you can set a cover on top of the page content. And still insert a H1 or the Title Block manually on demand. Or create two templates (one with title one without) and assign on a per page basis.
    2. Via the proper selector in theme.json or Additional CSS make sure that main has absolute positioning. Done.
    3. You may also look at Global Styles → Layout → Dimensions: And make sure that the main content areas top padding and margin are zero (so that it gets “pulled behind” the header properly). And also select the top “Group” (=the content area) in the template and check under its styles > Dimensions > That top padding and margin are not interfering with your layout.
    • This reply was modified 1 year, 8 months ago by abitofmind.
    Thread Starter abitofmind

    (@abitofmind)

    Screen Recording: Greenshift Block Theme → Template “Page without title” whose Post Content starts with a Cover Block with the alignment “Full Width” which spans behind a Transparent Header (which uses position: absolute; top 0):

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Hero Image in Block Theme spanning behind header into upper part of content area’ is closed to new replies.