[Support request] Have Featured Image/Title Width set to post width

[Caitlin]

The default for the featured image posts on single pages is to span the entire page with the sidebar pushed down to be aligned with the start of the article content. I want to have the featured post image (the one that the title overlays) to only be as wide as the post. I want the sidebar to be aligned with the start of the feature image/title. Is there a way to do this?

Thanks,
Caitlin

[Elvin]

Hi,

Can you link us to the site you’re working on?

I believe you’re using a Header Element or your posts.

Disabling this for your posts will change the format back to the default where the featured image is inside the content, which is aligned w/ the sidebar rather than having its own full width section. 🙂

[Caitlin]

It’s https://www.librarycat.com/the-tradition-of-library-cats/.

I disabled the element but that removes the overlay of the title on top of the feature image. Is there a way to preserve the styling of that element but have it centered only over the post?

Thanks,
Caitlin

[Elvin]

I disabled the element but that removes the overlay of the title on top of the feature image. Is there a way to preserve the styling of that element but have it centered only over the post?

You can restore the element and do this instead.

Go to WP Admin Dashboard > Appearance > Customize > Layout > Blog and under Featured Image, click “posts” tab and make sure “Display featured image” is checked.
https://share.getcloudapp.com/eDuwklKQ

It should display the featured image inside the content area which is aligned with the sidebar.

[Caitlin]

I have that set but it’s still putting the feature image/title across the entire page. (I did clear the cache)

[Elvin]

Can you link us to the site you can working on so we could check?

You can add the site credentials/details on the Private Information text field. Thank you. 🙂

[Caitlin]

I sent you the site link info in the private information box.

[Elvin]

Thanks. 😀

You can try opening your Header Element and set Background Image to “No Background Image” to remove the featured image on it.

We then check for any Layout Element that disables the Featured image.

On the Disable Element tab, make sure “Featured Element” is unchecked.
https://docs.generatepress.com/article/layout-element-overview/#disable-element

[Caitlin]

If I remove the featured image then the header is now a gray gradient with the title. I want the featured image, I am just looking to keep the style of having the title/meta overlay on top of the featured image.

Also, when I look at the tabs for the element, I don’t have a “disable elements” tab.

[David]

Hi there,

so as i read it, you want to keep the Header Element but to display above the main content.
If thats the case then try adding this PHP Snippet:

add_filter( 'generate_page_hero_location', function( $location ) {
    if ( is_single() ) {
        $location = 'generate_before_content';
    }

    return $location;
} );

[Caitlin]

Where do I add that snippet? In the header element for single posts?

[Leo]

You would need one of these methods
Adding PHP: https://docs.generatepress.com/article/adding-php/

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

[Author]

Posts