Only Retrieve First Image Of The Post In Mainpage If It Exists – Wordpress Hack

I am going to apply a small hack to the trick suggested by wprecipes.com to display the first image from the post in a mainpage.

Let’s summarize what they’ve done.

First they’ve created a function that retrives the first image of the post if the image is not found, then it will show default.jpg image from the defined location.

function catch_that_image() {

global $post, $posts;

$first_img = '';

ob_start();

ob_end_clean();

$output = preg_match_all('/"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);

$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image

$first_img = "/images/default.jpg";

}

return $first_img;

}

Code exactly copied from wprecipes.com

The above code snippet is to be copied in functions.php file located at the themes root folder. If it doesn’t exists, then you can create one using notepad, and paste the above code enclosed in following format:

Wprecipes.com’s function code goes here

?>

Now to load the image anywhere in your main page or any other page just places the following code within the posts loop.

The above PHP function code must like somewhere near to or

Consider it in the following example loop.

" rel="bookmark" title="Permanent Link to ">

by

" />

You’ll get following type of screen in your post loop.

The upper post contains the first image of the post. The lower content is not showing any images rather than a alternate tag. It is because we don’t have any image in the second post, by default from functions.php, functions will be redirected to no image and browser will try to load default image. If browser is unable to find /images/default.jpg, which we have specified in functions.php it will show no image but alternative title, you must upload default.jpg in the specific location to get the default image.

But using default image might not be dynamic and useful if most of your post doesn’t contain any images. Then we’ll have to seek extra tweaks to show nothing in place of default image.

Let me show you how can you accomplish this using extra function.

First, we’ll create a function that will scan for presence of any image in the specific post, then we’ll define what it must do if image is there and what it must do if image is not there. It can be accomplished by using conditional tags.

Here is the function to scan image, add this in functions.php just above, ?> (i.e. exactly above the PHP code end tag)

function image_scan( $args = array() ) {

if ( !$post_id )

global $post;

preg_match_all( '|?>|i', $post->post_content, $matches );

if ( isset( $matches ) ) $image = $matches[1][0];

if ( $matches[1][0] )

return array( 'image' => $image );

else

return false;

}


Now we’ll use PHP conditional tag in index.php or any page where we want this to take effect on.

Show image

The final code will be like this after applying the the image_scan condition.

" rel="bookmark" title="Permanent Link to ">

by

" />




Now you’ll have only thumbnails of first images if it exists, otherwise it shows no image.