How to get the souce URL of the featured image in WordPress

Swashata1

Previously we have talked about setting and getting featured images in WordPress using built in APIs. But, one of the drawback of this method is, it returns or prints the image with proper HTML. In other words, it does not give you the URL of the image. It becomes necessary if you want to

  • Pass the URL to scripts like say TimThumb for dynamic resizing.
  • Use the URL for inline css styling
  • and others…

So, in this tutorial we will learn how to do that by passing the fetched image HTML to our custom function.

#1: Understanding the concept:

#1.1: The output HTML of the API:

When we use get_the_post_thumbnail, then it returns a nice HTML code which looks like this…

    <img width="50" height="50" title="3d_pie_chart_icon_psd_by_psdblast-d4jqqn4" alt="3d_pie_chart_icon_psd_by_psdblast-d4jqqn4" src="http://localhost/wp/wp-content/uploads/2012/05/img.jpg" />

#1.2: What we need to do:

So, somehow we need to extract the src attribute from the HTML img tag. Now, there are a number of ways for doing this. I will discuss the fastest and simplest preg_match method, where you have to pass the output string and will get the src attribute.

#2: Using preg_match to get the source URL

From the output HTML we see that

  1. The image tag starts with <img.
  2. There can be almost anything or nothing before the src keyword.
  3. Inside the src the URL of the image is written in between two double quote. It can contain anything except double quotes.
  4. After src there can be again anything or nothing.

So, keeping in these strategies in mind, we make our regular expression to work with preg_match.

$src_pattern = '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i';

Now we use the preg_match like this:

$src = '';
$matches = array();
if(preg_match($src_pattern, $text, $matches)) {
    $src = $matches[1];
}

Where the $text variable should hold the HTML returned by the get_the_post_thumbnail function. So, we put together all the code and come up with something like this

/**
 * Get the post thumbnail URL
 *
 * Automatically gets and returns the source URL of the full-sized featured image
 * of the current post in the loop.
 *
 * You can also change the parameters below for more flexibility
 *
 * @param int $id The id of the post. If null, then it will fetch the current post thumbnail.
 * @param String $size The registered image size name. Default is full, which gives the full-size image url. You set it to post-thumbnail or anything else.
 * @return String The URL of the featured image of the queried size.
 */
function itg_get_the_post_thumbnail_url($id = null, $size = 'full') {
    //if no post thumbnail is set, return empty string
    if(!has_post_thumbnail($id))
        return '';

    //get the post thumbnail
    $text = get_the_post_thumbnail($id, $size);

    //initialize the variables
    $src = '';
    $matches = array();

    //set the match string
    $src_pattern = '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i';

    //match it
    if(preg_match($src_pattern, $text, $matches)) {
        $src = $matches[1];
    }

    return trim($src);
}

What the function does is it automatically gets the featured image of the current post in the loop and returns its full sized image URL. But it has some flexibility as well. As the comments say, the available parameters are:

  • $id – Integer – The id of the post. If null, then it will fetch the current post thumbnail.
  • $size – String – The registered image size name. Default is full, which gives the full-size image url. You set it to post-thumbnail or anything else.
  • return – String – The URL of the featured image of the queried size.

So when ever you need to get the image url, you call it like this:

//get full sized, current post
$img_src = itg_get_the_post_thumbnail_url();

//get thumbnail sized, custom post
//replace with your post ID
$img_src = itg_get_the_post_thumbnail_url(10, 'post-thumbnail');

//get thumbnail sized, current post
$img_src = itg_get_the_post_thumbnail_url(null, 'post-thumbnail');

//get full sized, custom post
$img_src = itg_get_the_post_thumbnail_url(10);

You are free to use this code anywhere you like. It should do what you want. If there is anything else you want to know, then just comment.