Retrieving first image

Hi Ajay,

$header_image  = get_field( 'article_header_image', $result );
        if($header_image ){
            $postimage = ( $postimage['url'] );
            $pick .= 'first';
        }
        else{
           if ( ! $postimage && $args['scan_images'] ) {
        preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $result->post_content, $matches );
        if ( isset( $matches[1][0] ) && $matches[1][0] ) {          // any image there?
            $postimage = $matches[1][0]; // we need the first one only!
        }
        $pick = 'first';
        if ( $postimage ) {
            $postimage_id = tptn_get_attachment_id_from_url( $postimage );

            if ( false != wp_get_attachment_image_src( $postimage_id, array( $args['thumb_width'], $args['thumb_height'] ) ) ) { // phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
                $postthumb = wp_get_attachment_image_src( $postimage_id, array( $args['thumb_width'], $args['thumb_height'] ) );
                $postimage = $postthumb[0];
                $pick     .= 'correct';
            }
        }

May i know why does the first image for some post does not show?

Are there specific pages where this shows or doesn’t show. It’s hard for me to debug without looking at the content.

What I suggest is doing a var_dump($header_image); after the first line to see what is being dumped for each post in the list.

Additionally, I don’t get this line:
$postimage = ( $postimage['url'] );

Where is this $postimage['url'] coming from. Shouldn’t it be $header_image if it holds the full URL of the post image. If it is an ID, then you’ll need to fetch this with wp_get_attachment_image_src

Lastly, where are you putting this code – in your functions.php of your theme?

add_filter( 'crp_thumb_url', 'wp14001119_get_first_image' );
function wp14001119_get_first_image( $postimage ) {
YOUR CODE HERE

return $postimage;
}

Hi Ajay, this is showing in my homepage. This is a image custom field and return format in array. Correct me if I am wrong. Yes it is in the functions.php

You would need to use:

$header_image[‘url’]

Hi Ajay,

Here is the link, for the custom post.
Just to confirm the plugin can’t get that first image to display in the thumbnail and have to add a custom function in the functions.php right? Please advise.

Info: https://imgur.com/a/bh8xvw4
https://stayprepared.sg/mymentalhealth/articles/losing-my-only-child-to-suicide/

@darylaurito

I don’t see the related posts from my plugin on that page.

Hi Ajay you can view it here. In the home page

https://stayprepared.sg/mymentalhealth/

View post on imgur.com

That portion highlighted is from the shortcode in your plugin.

Thanks. This helps and is clear to me. I can also see that the plugin is pulling the correct “first” image as it should be. Conscious that it isn’t the image that is in your meta-field.

Can you post the complete code that you’ve added to your theme’s functions.php based on what I posted above?

Additionally, I also made a mistake in the code above (mixed my plugins). Instead of crp, please use tptn in your code

Hi Ajay I added this code

add_filter( 'tptn_thumb_url', 'wp14001119_get_first_image' );
		function wp14001119_get_first_image( $postimage ) {
			
			$headerimage = get_field('article_header_image', $result);
			if($headerimage!=null){
				$postimage = $headerimage['url'];
			}
			if ( ! $postimage ) {
				$postimage = tptn_get_first_image( $result->ID, $args['thumb_width'], $args['thumb_height'] );  // Get the first image.
				$pick      = 'firstchild';
			}
			   if ( ! $postimage && $args['scan_images'] ) {
					preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $result->post_content, $matches );
					if ( isset( $matches[1][0] ) && $matches[1][0] ) {          // any image there?
						$postimage = $matches[1][0]; // we need the first one only!
					}
					$pick = 'first';
					if ( $postimage ) {
						$postimage_id = tptn_get_attachment_id_from_url( $postimage );

						if ( false != wp_get_attachment_image_src( $postimage_id, array( $args['thumb_width'], $args['thumb_height'] ) ) ) { // phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
							$postthumb = wp_get_attachment_image_src( $postimage_id, array( $args['thumb_width'], $args['thumb_height'] ) );
							$postimage = $postthumb[0];
							$pick     .= 'correct';
						}
					}
				}
			return $postimage;
		}

I’m made some edits if you could try this. Note that am shooting in the dark as I don’t know what your meta field returns.

add_filter( 'tptn_thumb_url', 'wp14001119_get_first_image' );
function wp14001119_get_first_image( $postimage, $thumb_width, $thumb_height, $result ) {
	
	$headerimage = get_field('article_header_image', $result);
	if ( ! empty( $headerimage['url'] ) ){
		$postimage = $headerimage['url'];
	}
	if ( ! $postimage ) {
		$postimage = tptn_get_first_image( $result->ID, $thumb_width, $thumb_height );  // Get the first image.
		$pick      = 'firstchild';
	}
	if ( ! $postimage ) {
		preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $result->post_content, $matches );
		if ( isset( $matches[1][0] ) && $matches[1][0] ) {          // any image there?
			$postimage = $matches[1][0]; // we need the first one only!
		}
		$pick = 'first';
		if ( $postimage ) {
			$postimage_id = tptn_get_attachment_id_from_url( $postimage );

			if ( false != wp_get_attachment_image_src( $postimage_id, array( $thumb_width, $thumb_height ) ) ) { // phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
				$postthumb = wp_get_attachment_image_src( $postimage_id, array( $thumb_width, $thumb_height ) );
				$postimage = $postthumb[0];
				$pick     .= 'correct';
			}
		}
	}
	return $postimage;
}

Hi Ajay not sure if this helps but I use this to get the below custom thumbnail image.

<?php
                $recent_posts = wp_get_recent_posts(array('post_type'=>'articles','numberposts' => 6,'post_status' => 'publish'));
                foreach( $recent_posts as $recent ){
                    $tImage = get_field( "thumbnail_image", $recent["ID"] );
                    $tImageSize = 'thumbnail_image_size';
                    $tImageTn = $tImage['sizes'][$tImageSize];
                    echo '<div class="col-6 col-md-4 pl-md-4 pr-md-4 mb-4 taxonomy-article pl-4 pr-2"><a href="'. get_permalink($recent["ID"]) .'"><figure><img src="'.esc_url($tImageTn).'"></figure><h4 class="py-2 gray">'. $recent["post_title"] .'</h4></a></div>';
                }
            ?>

If this is what displays that image in your screenshots, you can replace the get_field codes you had above with this potentially.

$tImage = get_field( "thumbnail_image", $result->ID );
$tImageSize = 'thumbnail_image_size';
$postimage = $tImage['sizes'][$tImageSize];

Hi Ajay thanks for your constant support. I did manage find the solution using this below code.

	$headerimage = get_field('article_header_image', $result->ID);
	if ( ! empty( $headerimage['url'] ) ){
			$tImageSize = 'thumbnail_image_size';
			$postimage = $headerimage['url'];
		}

However I need to place it in your plugin media.php to let it work instead of applying filter to it.

Understood. However, you’ll need to keep making the changes to media.php at every plugin update which is why the filter is there.

Especially if you could get this to work.

Is there a reason you’re not using the filter?

Hi Ajay maybe I need to declare $result as global in order to get the post id?