[Resolved] Display featured image

[Tomasz]

I’m struggling with displaying featured image on blog posts. Currently, I have page header off (on blog posts) but ideally would like to display such image when it’s on as well.
So far I have: created an element (“Single blog post header”) that created page header with the featured image – but this didn’t help.

[Leo]

Hi there,

The featured image isn’t showing is because you are using Sections add-on which removes all the default elements – it is supposed to be a page builder.

Had a look at the page you linked and you shouldn’t need to use Sections.

The content you have in Section 2 should be a footer widget:
https://docs.generatepress.com/article/footer-widgets/

And the content in Section 3 should be a copyright or footer bar widget area:
https://docs.generatepress.com/article/changing-the-copyright-message/
https://docs.generatepress.com/article/footer-bar-widget-area/

Let me know if this helps 🙂

[Tomasz]

Hey, I planned to change structure of the page later on but didn’t know that using sections has such impact. Good incentive now.
But…. is there any way around? Sometimes using sections seems like a good idea.

[David]

Hi there,

check out the Header Element, this allows you to add the featured image plus other features:

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

[Tomasz]

David, as I wrote in the first post, I had created a Header Element specifically for blog posts. It doesn’t work – at least the background image (featured image) doesn’t show up. Should the Element (and hence featured image) work if I am using sections? Can you check what might be wrong?

[Leo]

Header Element should work for sections as well.

I’m not seeing one being added to the page linked though?

Let us know 🙂

[Tomasz]

Just checked. Element called: “Single blog post header” should be added to the page: blog post

[Leo]

Hmm I just tested on my install and it definitely works.

Can you make sure the Display Rule is set for Post?

and make sure there aren’t other header elements that are causing the conflicts.

Let me know 🙂

[Tomasz]

Both things checked

OK. Few things:
1.I have only one more element, which is for the parent – blog page. Just to test things out I turned it off to see if helps; it didn’t).
2. Except for two elements I have three legacy headers which are not used on this post page.
3. When you go to the blog page, it pulls featured image from this child post that I can’t get to work as I want.
4. I tried removing sections. Featured image works now. Still, I would like to be able to use these feature.
5. Featured image is set directly on the post page. Also feature image settings are set under Customise > Layout > Blog >Featured Images.

[Tom]

Try this function:

add_action( 'generate_before_main_content', function() {
    $sections = get_post_meta( get_the_ID(), '_generate_sections', true );

    if ( $sections && has_post_thumbnail() ) {
        echo '<div class="grid-container grid-parent featured-image">';
            the_post_thumbnail();
        echo '</div>';
    }
} );

Let me know 🙂

[Tomasz]

Tom, I’ve just added this code as a hook:
– before main content
– execute php: on
– display set to post

Effect: This code appears just as a text above main content on the post page…

[Tomasz]

Progress:
-> I created widgets to abandon the use of sections on blog and post pages. Now featured image displays but a new problem arose. When I try to use the customizer to move the featured image below the title it doesn’t happen; instead, author and date of the post moves. Similar behavior doesn’t occur when I introduce other changes there, e.g. I can move an image to the left or right. It works properly.

[Tomasz]

Is it so that featured image appears below a header but not a title? I tied using Firefox Inspector and it seems that I just have header space empty. That would explain things a bit.

[Tom]

If you’re adding it inside a Hook Element, you would do this:

<?php
    $sections = get_post_meta( get_the_ID(), '_generate_sections', true );

    if ( $sections && has_post_thumbnail() ) {
        echo '<div class="grid-container grid-parent featured-image">';
            the_post_thumbnail();
        echo '</div>';
    }
?>

Let me know 🙂

[Author]

Posts