[Support request] Featured Image Above First Heading

[David]

I know you can move the featured image around the H1, but can it be placed above the first heading H2?

Thanks

[Ying]

Hi David,

Do you mean the H2 title of posts on blog/archive pages?

If so, go to customizer > layout > blog > Featured Images, under the archive tab, you can choose the featured image location to be above or below the title.

Hope this is helpful 🙂

[David]

Hi Ying

It’s for blog posts. So the title is H1 and then there is some text, then I’d like the featured image, before the first heading (H2).

[David]

Hi there,

you will need a PHP Snippet like this to filter the content:

add_filter( 'the_content', 'insert_featured_image', 20 );
function insert_featured_image( $content ) {
    $feat_img = get_the_post_thumbnail($post->ID, 'post-single');
    if ( is_single() && ! is_admin() ) {
        return prefix_insert_after_paragraph( '<div class="incontent-featured-image">' . $feat_img . '</div>', 1, $content );
    }
    return $content;
}
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    $closing_p = '</h2>';
    $paragraphs = explode( $closing_p, $content );
    if ($paragraphs) {
        $paragraphs[0] = $paragraphs[0].'</h2>'.$insertion;
    }    
    return implode( '', $paragraphs );
}

With that added, you will need to disable the Featured image , in Customizer > Layout > Blog –> Featured Images >> Posts. Or you’ll have them show up twice.

[David]

Thank you 🙂

[David]

You’re welcome

[Manu]

Hi David,
The PHP Snippet provided is placing the featured image after the first H2 tag. But the paragraph after the second H2 tag is converting to H2.

add_filter( 'the_content', 'insert_featured_image', 20 );
function insert_featured_image( $content ) {
    $feat_img = get_the_post_thumbnail($post->ID, 'post-single');
    if ( is_single() && ! is_admin() ) {
        return prefix_insert_after_paragraph( '<div class="incontent-featured-image">' . $feat_img . '</div>', 1, $content );
    }
    return $content;
}
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    $closing_p = '</h2>';
    $paragraphs = explode( $closing_p, $content );
    if ($paragraphs) {
        $paragraphs[0] = $paragraphs[0].'</h2>'.$insertion;
    }    
    return implode( '', $paragraphs );
}

In the above code, I replaced the </h2> with <h2>, then the featured image is showing above the first H2 tag. But the following H2 tags (second H2 title) is converting to plain text, without <h2> or <p>.

[David]

Hi Manu,

filtering the content can be sometimes hit and miss depending on what is in the content.
If you want to raise a new topic and share a link where i can see the issue i may be able to advise.

[Author]

Posts