Get Images From WordPress Posts and display as WordPress Post Thumbnail

display any image from the post content

How to Get Any Image from WordPress Post Content :

WordPress has a number of functions related to displaying images and post thumbnails but If you have not set an image as a featured image for a specific post then you will face some trouble in displaying wordpress post thumbnails with wordpress posts.

I am writing this short tutorial because I have faced this similar problem when I first started developing with WordPress.

The solution I am going to present here is based on regex, don’t  worry you do not have to be good at using regex because I am going to share the complete code here, required for displaying or getting the first image from any wordpress post.


This tutorial is just for showing you the way, how to get any image from any post  and display as wordpress post thumbnail, now which image to retrieve or where to use that image is completely up to you.

Note: This code will work only if there is at-least one image in your post content.

 

// display first image of a post

function first_image_of_postContent() {

global $post, $posts;

$first_img = ''; // this variable will hold first image of our postContent.

$imgString;

ob_start();

ob_end_clean();

$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);

// assigning first image to our variable”$first_img” from the array of all images our post contains.

$first_img = $matches [1] [0];

if(empty($first_img)){  //Defines a default image

$first_img = content_url()."/uploads/default.jpg";

}

$imgString ="<a href='".get_the_permalink()."' class='thumbnail-wrapper'><img src='".$first_img."' alt='' class='post-excerpt-image'/></a>";

// I have returned the image within a hyperlink , if you want to get just the image then remove the “<a></a>” tags.

return $imgString;

}

// end of getting first image of wordpress post

 

Copy and paste the above code in your theme “functions.php” file and call “first_image_of_postContent()” function in any theme template where you want to get or display this image. 


Note: The above code is tested in theme’s functions.php file and is working, it will work in plugin but I personally have not tested this in plugins.

If you do have any problem related to getting/displaying images from wordpress post or setting wordpress post thumbnail, please do ask in comments, we will be glad to help you.

If you liked this please do share on social media with your friends and support us.

3 Comments
  1. hi farooq, good tutorial , but if i want to display all the images in the post content, not only the first?

    thanks in advance

    • Hi, code given in this tutorial is enough to display all images from any post, all you need to do is changing this line of code
      $first_img = $matches [1] [0];

      $matches is an array which contains all the images of a post, i have displayed the first image which is at $matches[1][0], for displaying all images you need to loop through this array of images.

  2. Hi, in my blog i don’t create a separate image for each post, i write tutorials with screenshots. Its been a while i was looking for a script/code which automatically grab any image contained in the post and display it as a post thumbnail. I am happy to find the wordpress code on your site.

Leave a Reply to rardsog Cancel reply