[Resolved] Page Hero Featured Image Container: Contained and Full Width together

Home Forums Support Page Hero Featured Image Container: Contained and Full Width together

  • This topic has 7 replies, 3 voices, and was last updated 4 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1373427
    Martin

    Problem I need a page-hero which is a mix from the Container setting “Full Width” and Contained.

    Goal First the Featured Image “Full Width” and blurred and then a secondary DIV with the Featured Image contained(fit) above.

    Why: Good Question, I have several magazine sites with interviews, and often the “Teaser” or Featured images are in the weirdest aspect ratios and not croppable. The Site layout is not “boxed” It would look much nicer and would be a hassle-free solution. Problem is that the people doing the content are super untechy and don’t get the problem with responsive, aspect ratios etc.

    There is a solution for archieve /feed pages with smart slider 3 and dynamic slides (called Blur Fit) – but fun fact the generator can do so much but not just grab the current featured image of a single post.

    I can imagine that many other people might face the same problem.

    Example with the smart slider 3 blur fit: https://staging.baker-company.de/en/bc-zine-en/

    #1374033
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1374406
    Martin

    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>
    
    #1374509
    David
    Staff
    Customer Support

    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]

    #1384321
    Martin

    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.

    #1384502
    David
    Staff
    Customer Support

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

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

    #1384706
    Martin

    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

    #1385497
    David
    Staff
    Customer Support

    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

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