[Resolved] Featured image after Second Paragraph

[SHIVAM]

Hi team,
I want to show featured image after second Paragraph in single post. Not any option available in theme.

[Elvin]

Hi Shivam,

This is quite tricky to do as it requires us to manipulate the actual content to append the featured image on the 2nd line.

You can try this PHP snippet:

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( $feat_img, 2, $content );
    }
    return $content;
}
// Parent Function that makes the magic happen
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    $closing_p = '</p>';
    $paragraphs = explode( $closing_p, $content );
    foreach ($paragraphs as $index => $paragraph) {
        if ( trim( $paragraph ) ) {
            $paragraphs[$index] .= $closing_p;
        }
        if ( $paragraph_id == $index + 1 ) {
            $paragraphs[$index] .= $insertion;
        }
    }
    return implode( '', $paragraphs );
}

You then uncheck the “Display featured image” on the customizer settings. ( Appearance > Customize > Layout > Blog ) – This has to be done, else there will be 2 featured image displaying on your page.

[Ali]

Hello there Elvin, Thanks for providing the code.

Is there any way to modify this code to display the featured image on ‘pages’ as well and also set the height of the image to max 250px

[David]

Hi there,

you would add some CSS like this:

.incontent-featured-image img {
    max-height: 250px;
    object-fit: cover;
}

But it will crop the image if the aspect ratio is different.

[Ali]

the CSS above isn’t working. 🙁

Also, the PHP snippet by Elvin is working for posts but not for pages.

[Ying]

Hi Ali,

Try this PHP snippet to include pages:

add_filter( 'the_content', 'insert_featured_image', 20 );
function insert_featured_image( $content ) {
    $feat_img = get_the_post_thumbnail($post->ID);
    if ( (is_single() || is_page()) && ! is_admin() ) {
        return prefix_insert_after_paragraph( $feat_img, 2, $content );
    }
    return $content;
}
// Parent Function that makes the magic happen
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    $closing_p = '</p>';
    $paragraphs = explode( $closing_p, $content );
    foreach ($paragraphs as $index => $paragraph) {
        if ( trim( $paragraph ) ) {
            $paragraphs[$index] .= $closing_p;
        }
        if ( $paragraph_id == $index + 1 ) {
            $paragraphs[$index] .= $insertion;
        }
    }
    return implode( '', $paragraphs );
}

Try this CSS:

.entry-content p:nth-child(2) ~ img {
    max-height: 250px;
    object-fit: contain;
}

You can try containor coverfor object-fit to see which one you like better.

[Ali]

Thanks 🙂

[Ying]

No problem 🙂

[Reza]

Hi,

The snippet is affecting the WooCommerce product page as well.

Is there a way to avoid this or use elements to implement a script on specific post categories?

Thanks

[Ying]

Hi Reza,

Try change this part if ( (is_single() || is_page()) && ! is_admin() ) {

to
if ( (is_single() || is_page()) && ! is_admin() && ! is_woocommerce() ) {

[Reza]

Thanks 🙂

[Ying]

No problem 🙂

[Author]

Posts