Display the first image in posts from the same category on a page with paginatio

I managed to find a custom page template code below that display posts of a category on a page.

Just wondering how I am able to change it to display the first image of the post instead. And add pagination as well.

<?php /*
Template Name: ListPostsOnPage
*/ ?>

<?php get_header(); ?>

<div id="main">

<div id="contentwrapper">

	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="topPost">
  <h2 class="pageTitle"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
  <div class="topContent"><?php the_content('(continue reading...)'); ?></div>
<div class="cleared"></div>
</div>
	<?php endwhile; else: endif; ?>

<?php query_posts('category_name='.get_permalink().'&post_status=publish,future');?>

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

<?php if (function_exists('wp_list_comments')): ?>
<div <?php post_class(topPost); ?>>

<?php else : ?>
<div class="topPost">
<?php endif; ?>

  <h2 class="topTitle"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
  <p class="topMeta">by <?php the_author_posts_link(); ?> on <?php the_time('M.d, Y') ?>, under <?php the_category(', '); ?></p>
  <div class="topContent"><?php the_content('(continue reading...)'); ?></div>
  <span class="topComments"><?php comments_popup_link('Leave a Comment', '1 Comment', '% Comments'); ?></span>
  <span class="topTags"><?php the_tags('<em>:</em>', ', ', ''); ?></span>
  <span class="topMore"><a href="<?php the_permalink() ?>">Read More...</a></span>
<div class="cleared"></div>
</div> <!-- Closes topPost --><br />

<?php endwhile; ?>

<?php else : ?>

<div class="topPost">
  <h2 class="topTitle"><a href="<?php the_permalink() ?>">Not Found</a></h2>
  <div class="topContent"><p>Sorry, but you are looking for something that isn't here. You can search again by using <a href="#searchform">this form</a>...</p></div>
</div> <!-- Closes topPost -->

<?php endif; ?>

<div id="nextprevious">
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
<div class="cleared"></div>
</div>
</div> <!-- Closes contentwrapper-->

<?php get_sidebar(); ?>
<div class="cleared"></div>

</div><!-- Closes Main -->

<?php get_footer(); ?>

https://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it

Thank you ESMI,

But I am not a programmer, so any idea how to modify the code so that it only display image from a certain category? And also display a pager below?

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;
}

And also when it says: “Once done, you can simply call the function within the loop to display the first image from the post:” does it mean to call it from a custom page template?

Yep. I’d suggest that you start by simply using <?php echo catch_that_image();?> within the Loop of your custom page template.

Thank you so much esmi!!!!!

No problem ??