goloops

I　ｍａｎａｇｅｄ　ｔｏ　ｆｉｎｄ　ｔｈｉｓ　ｃｏｄｅ

<a href="<?php the_permalink() ?>"> <img style="height: 200px; width: 300px;" src="<?php echo catch_that_image() ?>" />

Ａｎｄ　ｉｔ　ｗｏｒｋｓ　ｏｋ．．．：）

Thanks greendemiurge, the code works great. Any idea how to change the code to make the images link to the respective post?

<img style="height: 200px; width: 300px;" src="<?php echo catch_that_image() ?>" />

Thanks a lot!!

thank you so much greendemiurge, i will going to give it a try later when i reach home ??

WOW! it works great!! is there a way to defining the resolution of the images displayed? Thanks again keesiemeijer for your quick response!!!

Do I put something inside the () in this line
<?php echo catch_that_image() ?>

Hi keesiemeijer, sorry to disturb you again, do you have any idea what code to change in order to make this code to display the first image of the posts in that categroy on a page?

$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

$args = array(
	'posts_per_page' => 10,
	'posts_status' => array( 'publish', 'future' ),
	'paged' => $paged,
	'cat' => 44,
);
// the query
$the_query = new WP_Query( $args );
?>

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

	<div class=" display-posts-listing .listing-item">
	<?php the_content(); ?>
    </div>

	<?php endwhile; ?>

<?php
    wp_pagenavi( array( 'query' => $the_query ) );
?>
	<?php else: endif; ?>

I found this link :https://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it
but have no idea how to integrate in in this code above.
Thank you so much for your help again!!!!

keesiemeijer, you should look at my face, tears all over now!!!!!

YOU MAKE MY DAY!!!! Have a great weekend ahead!!!

Thank you so much esmi!!!!!

Wow!!! Thank you so much keesiemeijer!!!! I almost cried when I see the result! You are my savior!!

Just one more request, is there anyway that I can change the pagination to something like, ( ? Prev 1 … 3 4 5 6 7 … 9 Next ? )

or make use of this plugin: https://www.ads-software.com/plugins/wp-pagenavi/screenshots/

I read this link: https://codex.www.ads-software.com/Function_Reference/paginate_links and I tried to replace this

<?php
next_posts_link( 'Older Entries', $the_query->max_num_pages );
previous_posts_link( 'Newer Entries' );
?>

with this

<?php
global $wp_query;

$big = 999999999; // need an unlikely integer

echo paginate_links( array(
	'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
	'format' => '?paged=%#%',
	'current' => max( 1, get_query_var('paged') ),
	'total' => $wp_query->max_num_pages
) );
?>

But it doesn’t seem to work…:(

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?

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(); ?>