[Support request] Customising blog single posts to show featured image and content separately

[Ben]

Hi,

I’m trying to layout my single posts so that the page displays in the following way:

TITLE
INTRO (eg first paragraph)
FEATURED IMAGE
REST of CONTENT (minus the first paragraph)

Now I have seen this post https://generatepress.com/forums/topic/featured-image-inside-the-article/#post-708308 and that works, but I’d like to know if its possible to do this within a GP Element? This way I can control the layout better.

Is it possible within an ELEMENT?

Many thanks
Ben

[David]

Hi there,

the post content can only be altered in the post editor or by using the_content filter hook like that code you link to is doing.
so you can’t design “it” with an element.

What you could do is change that code for this;

add_shortcode('portable_hook', function($atts){
	ob_start();
        $atts = shortcode_atts( array(
            'hook_name' => 'no foo'
        ), $atts, 'portable_hook' );
		do_action($atts['hook_name']);
	return ob_get_clean();
});

add_filter( 'the_content', 'insert_featured_image', 20 );
function insert_featured_image( $content ) {
    global $post;
    $inserted_hook = do_shortcode('[portable_hook hook_name="after_first_paragraph"]');
    if ( is_single() && ! is_admin() ) {
        return prefix_insert_after_paragraph( $inserted_hook, 1, $content );
    }
    return $content;
}
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 );
}

Now after the 1st paragraph it hooks in a custom hook for you called: after_first_paragraph
You can then in a GP Element set its Hook to Custom and add that to the field provided.

Otherwise you would need to store that first paragraph somewhere and then you could build it in a GP Element eg.

Title
Manual Excerpt or Custom Field
Featured Image
Post Content

[Author]

Posts