{"id":266,"date":"2011-08-19T15:23:07","date_gmt":"2011-08-19T06:23:07","guid":{"rendered":"http:\/\/www.santoshkori.com\/blog\/wordpress\/how-to-get-the-first-image-from-the-post-and-display-it-in-wordpress\/"},"modified":"2012-08-23T17:31:31","modified_gmt":"2012-08-23T08:31:31","slug":"how-to-get-the-first-image-from-the-post-and-display-it-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.santoshkori.com\/blog\/how-to-get-the-first-image-from-the-post-and-display-it-in-wordpress\/","title":{"rendered":"How to Get the first image from the post and display it in WordPress"},"content":{"rendered":"
\n
<div><\/div>\n
<\/div>\n
Most WordPress users are using custom fields to display thumbs on their blog homepage. It is a good idea, but do you know that with a simple php function, you can grab the first image from the post, and display it. Just read on.<\/div>\n
<\/div>\n
First, paste this function on your <em>functions.php<\/em> file.<\/div>\n
<\/div>\n
\n
<\/div>\r\n<div id="_mcePaste">function catch_that_image() {<\/div>\r\n<div id="_mcePaste">global $post, $posts;<\/div>\r\n<div id="_mcePaste">$first_img = '';<\/div>\r\n<div id="_mcePaste">ob_start();<\/div>\r\n<div id="_mcePaste">ob_end_clean();<\/div>\r\n<div id="_mcePaste">$output = preg_match_all('\/<img.+src=[\\'"]([^\\'"]+)[\\'"].*>\/i', $post->post_content, $matches);<\/div>\r\n<div id="_mcePaste">$first_img = $matches [1] [0];<\/div>\r\n<div id="_mcePaste"><\/div>\r\n<div id="_mcePaste">if(empty($first_img)){ \/\/Defines a default image<\/div>\r\n<div id="_mcePaste">$first_img = "\/images\/default.jpg";<\/div>\r\n<div id="_mcePaste">}<\/div>\r\n<div id="_mcePaste">return $first_img;<\/div>\r\n<div id="_mcePaste">}<\/div>\r\n<div id="_mcePaste"><\/pre>\n<\/div>\n
Once done, you can simply call the function within the loop to display the first image from the post:<\/div>\n
\n
<?php echo catch_that_image() ?><\/pre>\n<\/div>\n
If you enjoyed this article, please consider sharing it!<\/div>\n
<\/div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
<div> Most WordPress users are using custom fields to display thumbs on their blog homepage. It is a good idea, but do you know that with a simple php function, you can grab the first image from the post, and display it. Just read on. First, paste this function on your <em>functions.php<\/em> file. <\/div> <div […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,5],"tags":[129,130,131,132,725,133],"class_list":["post-266","post","type-post","status-publish","format-standard","hentry","category-tips-n-tricks","category-wordpress","tag-get-first-image-from-the-post-in-wordpress","tag-get-the-first-image-from-the-post","tag-get-the-first-image-from-the-wordpress-post","tag-how-to-get-the-first-image-from-the-post-and-display-it-in-wordpress","tag-wordpress","tag-wordpress-show-first-image"],"_links":{"self":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/comments?post=266"}],"version-history":[{"count":2,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/266\/revisions"}],"predecessor-version":[{"id":702,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/266\/revisions\/702"}],"wp:attachment":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/media?parent=266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/categories?post=266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/tags?post=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}