[Resolved] Page template including header section

Home Forums Support [Resolved] Page template including header section

Home Forums Support Page template including header section

  • This topic has 19 replies, 3 voices, and was last updated 1 week, 1 day ago by David.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1862445
    mkjj

    I have to build a website that needs many different page layouts. We have full-width pages, pages with full-with header but boxed content (with or without a sidebar). For example, I use a custom page template that adds a wrapper DIV to keep the content boxed. Now, I run into some issues. I want some pages look like blog posts. I set all blog related pages to a max. width like so:

    .blog .grid-container, .archive .grid-container, .single-post .grid-container {
        max-width: 1214px;
    }

    However, this does not work for a page, since the featured image is outside the grid-container DIV. I can’t change the rules for the featured image globally, since many pages use a full-width image. I need a solution for addressing this HTML part only on certain pages:

    <div class="featured-image page-header-image grid-container grid-parent">

    This is not part of the page template but the featured-images.php.

    What would be best practice to change the DIV structure so that certain pages will have the featured image as a part of the content area like so, for example:

    <div id="page" class="site grid-container container hfeed">
        <div id="content" class="site-content">
            <div id="primary" class="content-area">
    	    <main id="main" class="site-main">
                    <article>
    	            <div class="inside-article">
    		        <div class="featured-image  page-header-image-single ">

    Sorry for not explaining it more clearly.

    Here are a few examples.

    A blog post:
    https://doriskirch.de/corona-angst-achtsamkeit/

    A standard page with full-width header:
    https://doriskirch.de/challenge-achtsamkeit/

    A boxed page with full-width header:
    https://doriskirch.de/kundenstimmen-test/

    And here is a “problem page”:
    https://doriskirch.de/dozenten-mbsr-achtsamkeits-seminare/

    #1862504
    mkjj

    I probably overcomplicated things. I’ve just found out that the page template has a nice class in the body tag. That should do the trick, I guess.

    Nope, not working. I need the featured image DIV to be part of the content area. I don’t want it to be above the sidebar.

    #1862560
    David
    Staff
    Customer Support

    Hi there,

    so just to be clear – is the issue that you require two different hero/featured image layouts – but they are both required for the Page Template ?

    #1863295
    mkjj

    Yes, I guess this is what I need. Some pages use the featured image for the hero section. For other pages the featured image should be shown like an image that was embedded at the top of the editor content. It’s above the title of the post, and the top edge should be aligned with the sidebar like a single blog post:

    https://doriskirch.de/corona-angst-achtsamkeit/

    Alternatively, I could deactivate the page title and embed the image directly at the top of the content. I would rather avoid this, since it is a bit more difficult for the editors.

    However, it’s totally fine if GP is not built for this.

    #1863767
    Elvin
    Staff
    Customer Support

    Hi there,

    Yes, I guess this is what I need. Some pages use the featured image for the hero section. For other pages the featured image should be shown like an image that was embedded at the top of the editor content. It’s above the title of the post, and the top edge should be aligned with the sidebar like a single blog post:

    Can you explain more on which pages should have the layout w/ the featured image on the hero section and which ones should have the featured image on top of the content?

    I believe we can do this by playing around w/ multiple Header Elements and a Layout element to disable the featured image on top of the content. And we can specify this by page through the Display Rule Location. 😀

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

    #1863946
    mkjj

    I’m sorry for this pretty weird question. Unfortunately, this is what the customer wants.

    Most pages use the standad header element. I set the standard 1920px image there and use the featured image for the retina image with this function:

    add_action( 'wp_head', function() {
    	if( is_page() ) {
    			$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); 
    		  if ( !empty( $featured_img_url ) ) {
    				echo '
    				<style>
    				@media (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx), screen and (min-width: 2000px) {
    				.page-hero { background-image: url(' . $featured_img_url . '); }
    				}
    			  </style>';
    		}
    	}
    });

    For some pages I created a custom template and added a DIV that limits the width of the content area. These pages have no sidebars.

    Now I need pages that look more like blog posts. They have a sidebar, and the width of both the sidebar and the content are should be the same like a single post. The problem is that I can’t use the featured image, since the image is shown above both the content and the sidebar. I would like to have the featured image above the title. I’m not quite sure whether I will use a header element for these pages.

    This is a blog post. A header element is used for all blog related pages. The featured image appears above the title but inside the content section:

    https://doriskirch.de/corona-angst-achtsamkeit/

    This is one of those new page where I added a header element, but no featured image:

    https://doriskirch.de/stille-retreat/

    Here is a test page with no header element and a featured image:

    https://doriskirch.de/15835-2/

    And here is a second test page where I inserted image and title in the editor. No header element, no featured image and the title deactivated. The width is not perfect, but the layout should look like this:

    https://doriskirch.de/testpage-2/

    However, the function that relaces the header element with a retina image might be in the way.

    The customer would have to accept, if this can’t be done using a featured image. I would prefer not to use the editor for title and featured image. This can make things a bit more complicated, if the layout changes.

    The problem is the customer, who wants to mix blog pages, landingpage-like pages and blog-like pages. It’s probably a better idea to change these sepecific pages to blog posts. This would avoid these problems.

    #1864049
    Elvin
    Staff
    Customer Support

    The problem is the customer, who wants to mix blog pages, landingpage-like pages and blog-like pages. It’s probably a better idea to change these sepecific pages to blog posts. This would avoid these problems.

    I think we have to clear this up first.

    If I understand it right, for some pages you need the layout similar to – https://doriskirch.de/corona-angst-achtsamkeit/

    But for some pages, you need a layout similar to – https://doriskirch.de/testpage-2/ ? Please clarify this.

    If this is indeed the case, here’s a suggestion:

    I’ll group things up first. It’s up to you if it’s by tag or by category. This “groupings” sole purpose is for the display rule we’ll be needing for distinction between what page/s uses the Header Element and what page/s doesn’t use it.

    On the Header element, I’ll set the display rule location and exclusion. I’ll add an exclusion rule to exclude the group that’s supposed to use the layout similar to https://doriskirch.de/testpage-2/.

    Note: the layout on https://doriskirch.de/testpage-2/ can’t be achieved w/ a Header Element. You’ll definitely need something else (the featured image) for it.

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

    #1864097
    mkjj

    But how would I group pages? Tags or categories are not available for pages. I could use the page template like so:

    is_page_template('example.php')....

    The main problem seems to be that the DIV for the featured images of pages is outside the content area, while it is inside for blog posts. I guess, we can’t make this work without changing the HTML structure so that the featured image DIV is moved for specific pages.

    But this would have to be done in /inc/structure/featured-images.php, wouldn’t it? Something like this?

    if ( is_page_template( 'custom-page-template.php' ) ) {
        do something...
    }

    I appreciate very much your effort. But I totally understand if this is far beyond the scope of the support forum.

    #1864133
    Elvin
    Staff
    Customer Support

    But how would I group pages? Tags or categories are not available for pages. I could use the page template like so:

    You can assign a taxonomy on a page using a plugin. Or you can “group” them by making them a child of 1 parent page and then make an is_child function like the ones shared here and then use that as the display rule through a filter. (this is complex)

    Or you can just manually add pages one by one on the display rule exclusions if its not dynamic and it’s not a lot.

    The main problem seems to be that the DIV for the featured images of pages is outside the content area, while it is inside for blog posts. I guess, we can’t make this work without changing the HTML structure so that the featured image DIV is moved for specific pages.

    This is the main issue when you use Header Element. The Header element hooks in after the site’s <header> or before the <div id="page"> element and I think what you want is an image that shows inside the <div id="primary> so it shows above the content but beside the sidebar.

    Now the closest image that appears on this area is the default featured image for single post page. This is pretty much why I suggested grouping pages. To identify and set a display rule for which pages will use the Header element and which will use the layout with the default featured image for single post pages. 😀

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

    #1864168
    mkjj

    Now the closest image that appears on this area is the default featured image for single post page. This is pretty much why I suggested grouping pages. To identify and set a display rule for which pages will use the Header element and which will use the layout with the default featured image for single post pages.

    I must be missing something. The featured image (for pages!) is alsways displayed above both the content and sidebar section.

    In this example a header element ist not set for the page, and I have no sitewide rules for header elements:

    https://doriskirch.de/15835-2/

    The DIV is outside the #primary DIV:

    <nav id="site-navigation" class="main-navigation sub-menu-right">...
    <div class="featured-image page-header-image  grid-container grid-parent">...
    <div id="page" class="site grid-container container hfeed">
    <div id="content" class="site-content">			
        <div id="primary" class="content-area">
            <main id="main" class="site-main">

    Seems to be impossible to move the .featured-image DIV inside the #primary DIV without major changes.

    #1864180
    Elvin
    Staff
    Customer Support

    Seems to be impossible to move the .featured-image DIV inside the #primary DIV without major changes.

    You can just make one yourself. 😀

    Create a Block element with a dynamic image set for featured image inside a Container Block and hook it in on generate_before_content on pages you want to add it on. 🙂

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

    #1864212
    mkjj

    Oh, my! Now, why didn’t I think of that? This will do the trick! It is absolutely amazing how much we can do in GP without touching any theme files. Brilliant!

    I appreciate your patience. Thanks a bunch!

    #1864308
    mkjj

    Oh, I don’t have “block type”, “hook” and “priority” in my block settings like described here:

    https://docs.generatepress.com/article/block-element-overview/

    I’m running GP 2.0.3

    #1864337
    David
    Staff
    Customer Support

    Hi there,

    we need to update that doc, those options are now listed in the sidebar – select the Element ( not Block ) tab in the sidebar.

    #1864365
    mkjj

    OK, I’, probably slow today. I click “Elements” in the dashboard sidebar > “add new element” > “Block”. Then I can set location, exclusions and user, but that’s it.

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