Archived topic
Customising blog single posts to show featured image and content separately
1 reply · Started by Ben on April 6, 2023
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
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