Page Hero Featured Image Container: Contained and Full Width together

Hi there,

Not sure I fully understand the desired look, but you could:

1. Set the Page Hero to full width.
2. Within the hero content, use a div like this to container some of the content:

<div class="grid-container">
    Stuff in here is contained.
</div>

So anything outside of that div would be full width.

Let me know :)

yep exactly if there is a something like a template tag to fetch the featured image

as you described but like

<div class="grid-container">
    {{post_image}}
</div>

Hi there,

add this PHP Snippet to your site:

function db_feat_img_shortcode() {
    $img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large', false );
	return '<img src="' . $img_src[0] . '"/>';
}
add_shortcode( 'db_feat_img', 'db_feat_img_shortcode' );

Then you can add the featured image to your content using this shortcode [db_feat_img]

Thank you so much for your amazing help it worked.

Unfortunately, there is a problem with CSS filters at the moment, they get always inherited to the child object.

If you have something like :

<div class="nicebackground">
   <div class="fancyimage"></div>
</div>

.nicebackground {
filter: blur(5px);
background: url("test.jpg");
}

.fancyimage {
background: url("test.jpg");
}

as I found out — the inside DIV with the fancyimage class will have always the filter have applied too - no matter what you do.

Thats correct.
The filter applies to the container and what ever it contains.

Is the background image the one added in the Header Element ?

Yep

You can see what I mean mean on this page in the page hero

https://martin-peterdamm.com/fine-art-photography/

I did this with smartslider but it does not work on single posts so my idea was to build something similar with generatepress
and some CSS

But it seams it is a bit more complicated than I first thought

OK so try adding this PHP Snippet:

add_filter( 'generate_page_hero_output', function( $output, $options ) {
  if (is_single() ) {
    return sprintf(
      '<div class="super-hero">
        <div class="%1$s">
          <!-- hero background -->
        </div>
        <div class="%2$s">
          %3$s
        </div>
      </div>',
      trim( $options['container_classes'] ),
      trim( $options['inner_container_classes'] ),
      $options['content']
    );
  }
}, 10, 2 );

This applies to single posts. It changes the Hero Structure to this:

<div class="super-hero">
    <div class="page-hero">
        <!-- hero background -->
    </div>
    <div class="inside-page-hero">
        <!-- hero content -->
    </div>
</div>

We can now use some CSS like so:

.super-hero {
    position: relative;
    overflow: hidden;
}

.super-hero .page-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(5px);
    z-index: -1;
}

Note: the header elements padding gets applied to the page-hero element so it will not show on the front end. If needed you will have to add it the inside-page-hero element

excuse me to dig out this Post, but I found a nice CSS solution to get the second bigger image below blurred.

.inside-page-hero {
backdrop-filter: blur(15px);
}

downside: It is not yet working in Firefox. but the backdrop-filter might be a solution to many other problems.

https://developer.mozilla.org/de/docs/Web/CSS/backdrop-filter

Yes - that would be a nice simple solution - hopefully it will pass the Editors Draft and be adopted correctly across all browser :)