Catch That Image: An Essential WordPress Function

by Jason Unger, Founder

Insights / Website Development / Catch That Image: An Essential WordPress Function

Image by Debbie Unger Photography

I love using big, bold images online.

They make blog posts look interesting. They catch your eye and give you something to focus on. They give your customers a better look at your products, or help them better understand the services you offer. Great photography helps, too.

Many times, those images are used in your main content area (your blog post, product page, landing page, etc.), but you definitely don’t want to be limited in how you use them.

For example, with the proliferation of sharing on social networks, in order to get your customers’ attention, it’s crucial to use a big, bold image that stands out. The right image draws attention to your content and can improve the chances that it’s clicked on.

If your WordPress theme doesn’t support setting a custom share image for each page or post, you’d likely want to use the image placed inside your content area. But the Facebook, Pinterest or LinkedIn share code may choose a different image to use as the default thumbnail – hurting your chances at being clicked.

You may also want to do something fancy – like a recent posts widget on your sidebar with thumbnails of the featured photos from your recent posts. If you’re not using WordPress’s built-in Featured Image option, you need an easy way to automate the grabbing of the image URL in each post.

That’s where Catch That Image comes into play.

Catch That Image: Automagically Outputting Your Content’s Image

Catch That Image is a WordPress function that does two things:

1. Looks in your post/content area for <img> (image) code, and
2. Saves the first image it finds as a variable, or assigns a default one, that you can use in other places.

Here’s the code to add to your functions.php file, with a default image set to Digital Ink’s Facebook logo.

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 = "https://www.digital.ink/wp-content/uploads/dgtlnk-logo.svg";
     }
     return $first_img;
}

To output the image, use this:

<?php echo catch_that_image() ?>

As explained above, the function will go through the content of your post, find the first image inserted into it, and save it so it can be output in another place. Be sure to set a default image in case there isn’t an image in your post.

If you’d like to use the image found via Catch That Image to be the default photo used for sharing on social media, here’s the example code you’d add to your header (before the closing </head> tag):

<meta property="og:image" content="<?php echo catch_that_image() ?>"/>

This Open Graph tag tells Facebook, LinkedIn and Pinterest that the “caught” image is the default that should be used for sharing.

Catch That Image has come in incredibly helpful on all of the sites we build, so it’s one of the first functions we always add to a new WordPress custom design.