Get The First Image From Posts & Display

How to Get The First Image From Posts & Display

in Media
Google+ LinkedIn

Post Thumbnails is a theme feature introduced in WordPress Version 2.9. It was quickly changed to Featured Images with Version 3.0. Basically, Post Thumbnail/Featured Image allows you to upload and assign a custom image to an article that is chosen as the representative image for Posts, Pages or Custom Post Types. Usually blog owners display this custom image at the top of each post. This feature has now become a standard for theme designers and developers. But often, you find some old blogs have a whole archive of posts with no featured image displayed. No, they did not just forget to upload Featured Image on older posts but it would take too much time to go through each post and add a featured image now. To help you with this issue, you can get the first image from posts and display it instead of featured image, if no featured image is present.

In this example we will be using featured image for new posts as intended but for old archive posts we will use the first image it finds in the post content for the thumbnail, or a default/fallback image if none present.

You can paste this code snippet in your functions.php file to retrieve the first image from posts.

// automatically retrieve the first image from posts
function get_first_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 fallback imaage
        $first_img = get_template_directory_uri() . "/images/default.jpg";
    }
    $first_img = '<img src="' . $first_img . '" alt="Post Image" />';
    return $first_img;
}

If you just want to show first image from post and do not want to use featured image at all then you simply need to use this code in your theme files where you want to display images.

<?php echo get_first_image(); ?>

But if you do want to the benefit of featured image on new posts and still want to show first image from old archive posts with image fallback then use this piece of code in your theme files.

<?php
    if ( get_the_post_thumbnail( $post_id ) != '' ) {
        the_post_thumbnail();
    } else {
        echo get_first_image();
    }
?>

source

Share the love

If you like this snippet, share it with others!

One Reply on "Get The First Image From Posts & Display"

  1. Hubert Daul

    Hi Nick,

    Thanks for this article, but my problem is a bit different.

    I am changing to a new theme, and I would like to replace the actual thumnail image,in the old theme), with the first image in the post, and save this automatically in the db, thus I have only to run it once.

    Do you know is this is possible, and maybe how?

    Thanks in advance

    Hubert

Leave a Reply

Your email address will not be published. Required fields are marked *