Wordpress - Get the first image from post content (eg.: hotlinked images)

If you want display an image that is inserted into your content (a hotlinked image, for example), you must use a function like this (source):

add in functions.php:

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

Then place <?php echo catch_that_image() ?> where you want display the image.

Note: a hotlinked image just placed in your content can't be set as Featured Image, a bultin WordPress'feature.


I suggest two ways:

Using a Plugin

I would consider using the Get The Image plugin, so you could do something like:

$args = array(
    'post_id' => <id>
    'image_scan' => true
);
get_the_image($args);

The above will try to do things in this order:

  1. Look for the post thumbnail
  2. Look for the first attached image
  3. Scan the post content for a inserted image.

Building support in your theme

However, I'm using a function in a plugin that implements the first two items of the list above.

function gpi_find_image_id($post_id) {
    if (!$img_id = get_post_thumbnail_id ($post_id)) {
        $attachments = get_children(array(
            'post_parent' => $post_id,
            'post_type' => 'attachment',
            'numberposts' => 1,
            'post_mime_type' => 'image'
        ));
        if (is_array($attachments)) foreach ($attachments as $a)
            $img_id = $a->ID;
    }
    if ($img_id)
        return $img_id;
    return false;
}

You can adapt it to also match the third item within Diana's snippet:

function find_img_src($post) {
    if (!$img = gpi_find_image_id($post->ID))
        if ($img = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches))
            $img = $matches[1][0];
    if (is_int($img)) {
        $img = wp_get_attachment_image_src($img);
        $img = $img[0];
    }
    return $img;
}

Just stick these two functions in your functions.php file and use them in the loop like:

<?php while (have_posts()) : the_post(); ?>
    <?php if ($img_src = find_img_src($post) : ?>
        <img src="<?php echo $img_src; ?>" />
    <?php endif; ?>
<?php endwhile; ?>

the code seems perfectly safe. like you said, you don't have any image attached to the post.

Consider going to the media admin panel and attach a image to that post.

Alternately, scrap the post content with a regex for images in it.