Print the first picture from a wordpress post

Print the first picture from a wordpress post

29.12.2012

Catch the first image from a wordpress post? Why is there needed a function for that? There are already the “featured image” function in WordPress. Well, for many purposes, that cannot be used. For example if you have a blog where a lot of people are writing, and you are listing excerpts with a image in your front page or category pages, like I do on this blog. If you do, the easiest way is to let people use featured image in blog posts, and then you just print that one in your index.php and category.php. But the problem is, people does not always remember to use featured image. And you do not want to teach them all the time how to do. And you do not want your site’s design to break because bloggers are forgetting to use the function. Then a fallback function picking the first picture from the post is great!

The code for printing the first image from a post in WordPress:

This goes in to functions.php:

// Get URL of first image in a post
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];

// no image found display default image instead
if(empty($first_img)){
$first_img = “/images/default.jpg”;
}
return $first_img;
}

This goes into category.php, index.php or where ever you want to use it:

<a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><img src=”<?php echo catch_that_image(); ?>” alt=”<?php the_title(); ?>” /></a>

I hope I could help you. At least the code for printing the first image from a post in WordPress helped me in at least three projects.

 

Advertising
  • Gueat

    It’s a good effort but there are some syntax errors in the function PHP, most notably a missing closing ‘ and apparently a misplaced “<"   :

    • http://jonathanbjorkskog.com/ Jonathan björkskog

      Ouch, I’ll try to fix it. I just copied the working solution from one of my WordPress blogs, but the editor seems to have stripped away something. Thanks for pointing it out!

Download new responsive WordPress template

New responsive WordPress template with big call-to-action-areas, header-slider and different color-themes. It is built on Bootstrap and named Strap Them Boots On. Read more and download!

The one writing here:

Important information

This is the search engine optimization (SEO) and web tactics webiste/blog for Jonathan Björkskog, working at and co-owning Genero Digital Agency, a digital advertising agency based in Helsinki, Finland. If you searched for my Swedish blog, you find it here: jonathanbjorkskog.se.

That's one of my passions.

If you were searching for the other one, kitesurfing, you should check out my kitesurfing blog instead.

Follow on Facebook

Head over to the wall and send me all your questions about Facebook, SEO, or any other awesome topic on the internet!

Premium SEO-Plugin

Brian D. Hawkins about SEOPressor:

It’s almost as if SEOPressor took those features from my checklist. I guess I’m old school but I have a checklist that I use when writing new posts. It’s pretty cool that SEOPressor helps automate some of those tasks and the check/remind feature is very nice. As usual I love your presentation.

http://hotblogtips.com/about

Click Here to Download
SEOPressor
Read my SEOPressor review