[Resolved] Featured Title aligned in the middle center of the Featured image

[Yulia]

Hi, could you please answer one more question please? I’ve set the header with the title centered horizontally and assigned the height through the css. I need the method to align the title vertically too and if possible to display this type of header conditionally so only when the featured image actually exists. I assigned the height though the class of this header, so I worry if there’s no this featured image then title will still be the usual height.

[Leo]

Hi there,

To align page hero content vertically, simply add equal top and bottom padding:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-4-set-the-height

And just to make sure, you don’t want the header element to show if there is no featured image uploaded for the post?

Let me know 🙂

[Yulia]

Thanks for the help.

And just to make sure, you don’t want the header element to show if there is no featured image uploaded for the post?

Correct, I need just a standard title instead.

To align page hero content vertically, simply add equal top and bottom padding:

What if the title consists of a few lines, then the height of the featured image won’t be the same height all across the site and I need this feature.

[Yulia]

so, I’ve solved this with css for the thumbnail container
.featured-single
{
height:667px;
display:flex;
align-items:center;
width:1000px !important;
}

Let me know if this solution is correct. Though it works, when I remove the featured image it’s still reserving the space for it
http://saasvaluechain.smartleads.eu/eos-perspiciatis-aut-ab-nobis-delectus/?preview_id=51&preview_nonce=f8ffe3b199&post_format=standard&_thumbnail_id=-1&preview=true

[David]

Hi there,

its better to use min-height and max-width when defining dimensions of an element. Min-height will allow the height to flow if need be. Max-width will allow the width to reduce as the screen size reduces.

To remove the Header Element when there is no featured image requires some PHP. Tom provides the solution here:

https://generatepress.com/forums/topic/suppressing-hero-on-pages-without-feature-image/#post-980046

[Yulia]

Thanks for the guidance, I’ve created an Element Hook, pasted there the codes Tom provided, checked ID of the Header Element (from the Edit URL like http://saasvaluechain.smartleads.eu/wp-admin/post.php?post=160&action=edit&classic-editor), so I took 160, my code is

<?php 
add_filter( 'generate_header_element_display', function( $display, $element_id ) {
    if ( 160 === $element_id ) {
        if ( ! has_post_thumbnail() ) {
            $display = false;
        }
    }

    return $display;
}, 10, 2 );

or without the <?php

not working (checked the Display Rules too)

[Leo]

That code should be added using one of these methods:
https://docs.generatepress.com/article/adding-php/

Code Snippets is the easiest if you aren’t using a child theme already.

[Yulia]

Mmm, added this way, but still doesn’t work.

[Leo]

You don’t need the <?php in the code but it shouldn’t matter.

Can you make sure the snippet is indeed activated and all plugin and server cache is cleared?

[Yulia]

Yes, in this plugin I inserted without <?php (though I only set it to check, I noticed that for Elements this is also not needed for a while already, so I don’t use it there too).
I activated it, no cache plugins at all and everything reacts on changes instantly. Still nothing

[Leo]

Hmm can you try this?

add_filter( 'generate_header_element_display', function( $display, $element_id ) {
    if ( 160 === $element_id && ! has_post_thumbnail() ) {
            $display = false;
    }
    return $display;
}, 10, 2 );

Please double check the element ID.

Let me know 🙂

[Yulia]

This one works, though I don’t see why, if the first condition is true it will follow the next line. Great it works, though would be so nice to know why the first one doesn’t. Thanks, appreciate the quality of support immensely

[Leo]

Honestly don’t see why either. It was a shot in the dark…

Glad I could help 🙂

[Yulia]

if only I set somewhere some extra spacing, but I copied the code, and the person who initially used it reported that it works.
Thanks for the shots 🙂

[Yulia]

Oy! The thing is it works only in 1 post! So this is already some feedback, so, here:

http://saasvaluechain.smartleads.eu/excepturi-voluptatibus-corrupti-aperiam-vel-sit/

it works, however here:

http://saasvaluechain.smartleads.eu/id-nulla-quia-odio-nostrum-in-provident/

and anywhere else, it doesn’t!

It means I guess this part – 160 === $element_id – means something else, probably the post ID not the Element

[Author]

Posts