[Resolved] Showing automatic excerpt on the wp-show-posts list

[Hasan]

I have a list created with WPShowPosts on this page: https://snapbangladesh.com/stories/

I am displaying the full post here, but need a way to shorten the text as an automatic excerpt.

If I use the “more” block, the image and text from the post appear on the archive pages, which is not expected: http://prntscr.com/nzucg2

If I use the manual excerpt on the post, the excerpt appears on the archive pages, which is not expected either: http://prntscr.com/nzudyo

Also, the full post is being shown on the show post list, because I’ve set it up to display the full post: http://prntscr.com/nzueuv

I can not set up the show post to display the excerpt because I need to display the main image from the post on this page along with an excerpt. Setting it up to show excerpt hides this image.

Please provide a solution!

[David]

Hi there,

the only real resolution to this is to add Featured Images to your posts instead of adding them as an Image Block in the content.

If you still wish to add them as an Image Block then you would need to also add them as the Featured Image and the Uncheck them from being displayed using the Customizer > Layout > Blog > Featured Image Options.

[Hasan]

Thanks David!

Can’t use one image for both featured and post image. I need 2 different images for these because of the size and watermarking issue.

Any other idea?

[David]

Not sure i full understand.
You can set a featured image that you can set to display only in the archives which will also display in WP Show Posts.

Then the other image within the Content using your Image block.

What am i missing? 🙂

[Hasan]

The issue is, the featured images are small size images without watermark, which should be displayed only on the archive pages. But the image I need to show on the show post is a larger size image with watermark. If I display the featured image on the show post list, it will be stretched.

Hope you can come up with another great idea as usual! 🙂

[David]

Not 100% sure on this but we could create a shortcode to get the first image in the post with this function ( add it to your child theme functions.php or code snippets plugin ):

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+?src=[\'"]([^\'"]+)[\'"].*?>/i', $post->post_content, $matches);
  $first_img = $matches[1][0];

  if(empty($first_img)) {
    $first_img = "/path/to/default.png";
  }
  return '<img src="'.$first_img.'"/>';
}
add_shortcode('first-image', 'catch_that_image');

Then we can hook the shortcode into WPSP.

Create a new Hook Element
Add the shorcode:

[first-image]

Select Custom Hook and enter: wpsp_before_content
Check the execute Shortcodes.
Set your display rules.

As i said not 100% sure but lets see if we can the image in there and then worry about the styling.

[Hasan]

Awesome! It definitely is catching the first image except one: https://snapbangladesh.com/stories/

What’s next?

[David]

Odd how it missed the first one – maybe try editing and republishing it.
So the code we used previously to make the post image the width of the container we can do the same to it:

.wp-show-posts-entry-header + img {
    margin-left: -40px;
    width: calc(100% + 80px);
    max-width: calc(100% + 80px);
}

[Hasan]

Awesome!! The image is full width now! (added the CSS on the style.css of the child theme)

Should I enable the excerpt view for the show post now instead of the full post?

[David]

Yeah then it should remove the second image.

[Hasan]

Perfect!

How to insert a link of “License this image” after the image?

Need to insert the following HTML exactly:

<a href="#" class="license-caption-link">License this image</a>

[David]

You could include it within the shortcode within this rule:

return '<img src="'.$first_img.'"/>';

like so:

return '<img src="'.$first_img.'"/><a href="#" class="license-caption-link">License this image</a>';

[Hasan]

Perfect! 🙂

Is it possible to insert the same link after the image on the single posts too? I am doing it manually now by assigning the block as a reusable block as you suggested on a previous thread. But the problem is, when I convert the reusable block to a regular block on a new post, the caption goes away. I then need to insert the link manually, which is not convenient.

Could it be done?

[David]

If your Image will always be the first block the you could add content filter to strip in the tag before the first paragraph like so:

add_filter( 'the_content', 'db_insert_before_first_paragraph' );
function db_insert_before_first_paragraph( $content ) { 
    if ( is_single() ) {

        $my_div = '<a href="#" class="license-caption-link">License this image</a>';
        $first_para_pos = strpos( $content, '<p' );
        $new_content = substr_replace( $content, $my_div, $first_para_pos, 0 );
        
        return $new_content;
    }
    
    return $content;

}

[Hasan]

Worked perfectly! 🙂

Now the last part to fix on this is, I’ve set automatic excerpt for a long post, which is now being shown on the archive page: https://snapbangladesh.com/

How can I stop the excerpt being generated on the archive page?

[Author]

Posts