[Resolved] Featured image after Second Paragraph

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.

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.

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.

No problem 🙂

Hi Reza,

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

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

No problem 🙂