Separate image from post while maintaining tag

Here’s the website I’m working on: http://thenormalschool.com/sunrise/

The section that begins with “What’s Normal Right Now:” is where my posts begin. As you can see, I have the images and the content separate divs. But, even when hyperlink the images in the wordpress backend, the images do not appear with the links assigned to them. Here’s my code:

<h1>What&apos;s Normal Right Now:</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post">

<div id="thumb">
<?php
  preg_match_all("/(<img [^>]*>)/",get_the_content(),$matches,PREG_PATTERN_ORDER);
  for( $i=0; isset($matches[1]) && $i < count($matches[1]); $i++ ) {
    echo $beforeEachImage . $matches[1][$i] . $afterEachImage;}?>
</div>
<div id="pcontent">
<h2><?php the_title(); ?></h2>
<p><em><?php the_time('F jS, Y') ?></em></p>
<p><?php
  ob_start();
  the_content('Read the full post',true);
  $postOutput = preg_replace('/<img[^>]+./','', ob_get_contents());
  ob_end_clean();
  echo $postOutput;
  ?></p>
</div>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
</div>

This seems like a fairly common feature of many websites (posts with clickable images), so I’m surprised this isn’t easier to do. Maybe I’m just going about it in the wrong way. If anyone has any suggestions to make this happen, I’d greatly appreciate it.