As I understand, you want the first image in your post to get inside your excerpt. So I have a better solution, why not make another function inside functions.php file that contains your image concatenated with the original excerpt?
Add to your functions.php
function get_new_excerpt(){ $str = ''; $img = '<img src="'.catch_that_image().'">'; $linkedImage = '<a href="'.get_permalink().'" title="'.get_the_title().'">'.$img.'</a>'; $str .= '<div class="post-image">'.$linkedImage.'</div>'; $str .= '<div class="post-excerpt">'.get_the_excerpt().'</div>'; return $str; } // Catch first Image from http://css-tricks.com/ 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)) { $first_img = "/path/to/default.png"; } return $first_img; }
then in your index.php or what ever page you want to show this function, insert:
<?php if(have_posts()) : while(have_posts()) : the_post(); ?> <div class="post"> <h1 class="post-header"><?php the_title(); ?></h1> <div class="post-info"> <?php echo get_new_excerpt(); ?> </div> </div> <?php endwhile;endif;wp_reset_query(); ?>
you might want to add some css style like:
<style> .post { clear: both; background-color: #fff; border: 1px solid #ccc; overflow: hidden; } .post h1.post-header { border-bottom: 1px solid #ccc; } .post .post-info { clear: both; overflow: hidden; } .post .post-image { float: left; width: 100px; height: 100px; background-color: #EFEFEF; } .post .post-image img { width: 100%; height: 100%; } .post .post-excerpt { float: right; width: calc(100% - 120px); text-align: left; } </style>