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

Posted by in Articles, Internet

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('/<img.+src=[\'"]([^\'"]+)[\'"].*>/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:

<?php

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.

<?php echo catch_that_image() ?>

The above PHP function code must like somewhere near to <?php the_content(); ?> or <?php the_excerpt(); ?>

Consider it in the following example loop.

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<!-- Title of the post -->

<h2>

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">

<?php the_title(); ?>

</a>

</h2>

<!-- date and author of the post -->

<small>

<?php the_time('F jS, Y') ?> by <?php the_author() ?>

</small>

<p>

<!-- Thumbnail of the first image -->

<img src="<?php echo catch_that_image() ?>" />

<!-- Summary content of the post -->

<?php the_content(); ?>

</p>

<?php endwhile; ?>

<?php endif; ?>

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( '|<img.*?src=[\'"](.*?)[\'"].*?>|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.

<?php  if (image_scan('TRUE')) {  ?> Show image <?php } ?>

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

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<!-- Title of the post -->

<h2>

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">

<?php the_title(); ?>

</a>

</h2>

<!-- date and author of the post -->

<small>

<?php the_time('F jS, Y') ?> by <?php the_author() ?>

</small>

<p>

<!-- Thumbnail of the first image -->

<?php  if (image_by_scan('TRUE')) { ?>

<img src="<?php echo catch_that_image() ?>" />

<?php } ?>

<!-- Summary content of the post -->

<?php the_content(); ?>

</p>

<?php endwhile; ?>

<?php endif; ?>

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

Hope this tutorial was helpful.