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>