How do I add the featured image to the_content after the first paragraph?

Question

How do I add the featured image to the_content after the first paragraph?

Anders

2022年4月26日 14:01

My problem:

I'm trying to create a filter that will add the featured image of a post to the_content, so that I can have the first paragraph of the_content displayed before this image.

What I basicly want to achieve:

pFirst Paragraph of the_content/p
imgThe Post's Featured Image/img
pThe rest of the_content/p

I someone is able to help me.

Thanks in advance!

Topic the-content post-thumbnails filters Wordpress

Category Web

TechShole · Accepted Answer · 2022年4月26日 14:01

This Is Simple Process to Done it. Follow Simple Step.

Login to Your Website and Go To Dashboard On WordPress.
Go To Appearance>Theme File Editor>Theme Functions (functions.php)
Paste This Code.

// Adds $featured_img and $caption after n paragraph
    
add_filter( 'the_content', 'insert_featured_image' );
    
function insert_featured_image( $content ) {
    if ( has_post_thumbnail($post->ID) ) {
            if ( has_post_thumbnail($post->ID) ) {
                }
        $featured_image = '<div>' . get_the_post_thumbnail( $post->ID, 'full' ) . '</div>'.'<div>' . $caption . '</div>';
    if ( is_single() && ! is_admin() ) {
            return prefix_insert_after_paragraph( $featured_image, 2, $content ); // The numeral here controls the number of pars. Customise it to your needs
        }
    }
    
    return $content;
}
    
    // Parent function
    
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 );
}

TheWiseOldElf · Accepted Answer · 2021年12月27日 09:47

To customise the number of paragraphs before the featured image, I adapted the above answer and adapted the code from an ad placement solution.

To use: Add the following two snippets to functions.php and customise the numeral where indicated to control the number of paragraphs.

// Adds $featured_img and $caption after n paragraph

add_filter( 'the_content', 'insert_featured_image' );

function insert_featured_image( $content ) {
if ( has_post_thumbnail($post->ID) ) {
        if ( has_post_thumbnail($post->ID) ) {
            $caption = get_the_post_thumbnail_caption( $post );
        } else {
            $caption = '';
        }
    $featured_image = '<div>' . get_the_post_thumbnail( $post->ID, 'full' ) . '</div>'.'<div>' . $caption . '</div>';

    if ( is_single() && ! is_admin() ) {
        return prefix_insert_after_paragraph( $featured_image, 2, $content ); // The numeral here controls the number of pars. Customise it to your needs
    }
}

return $content;
}

// Parent function

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 );
}

FlashingCursor · Accepted Answer · 2016年3月22日 11:28

You can do this using the 'the_content' filter:

add_filter( 'the_content', 'insert_featured_image', 20 );

function insert_featured_image( $content ) {

    $content = preg_replace( "/<\/p>/", "</p>" . get_the_post_thumbnail($post->ID, 'post-single'), $content, 1 );
    return $content;
}

Of course, you can add options to the the_post_thumbnail() function to define which size of thumbnail you'd like to use, etc... http://codex.wordpress.org/Function_Reference/the_post_thumbnail

amit · Accepted Answer · 2012年8月9日 02:42

Note -

Using some kind of regex matching you can do this. Here's one of them. Just drop in this snippet in yout theme's functions.php file so that it will print content of variable $img just after first paragraph (i.e. after first occurrence of </p> tag) in your post content.

passing current posts thumbnail / featured image value to $img will print that image after first paragraph.

// Goes into functions.php file
// Adds $img content after after first paragraph (!.e. after first `</p>` tag)
add_filter('the_content', function($content)
{
   $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
   $img = '<img src="'.$url.'" alt="" title=""/>';
   $content = preg_replace('#(<p>.*?</p>)#','$1'.$img, $content, 1);
   return $content;
});

^{Modified this to append variable after first paragraph.}

bgallagh3r · Accepted Answer · 2012年8月9日 01:21

Technically the quickest solution would be to use a shortcode in your content. Otherwise you'll need a good handle on regex to dump the image between paragraphs using a filter.

Best way would be to add this to functions.php

<?php 

function featured_image($post) {
    if (has_post_thumbnail($post->id))
        the_post_thumbnail('large');
}

add_shortcode('featured_image', 'featured_image');
?>

After your first paragraph in the content just type [featured_image].

How do I add the featured image to the_content after the first paragraph?

Note -

About