Tutorial: How to get image path on a post in WordPress efficiently

This is something that WordPress currently doesn't support yet. You will face the problem of retrieving image on a particular post on the loop while you are working on WordPress theme or plugin. WordPress doesn't provides you with a method that you can use to retrieve the images on the post and you would have to search all over the internet to find someone sharing their secret with you. Thus, rather than using a complex or methods built by others, i personally have a much simple and efficient way of doing this.

The Problem

I wanted to retrieve all images on a particular post under a category and make it into a gallery. However, WordPress doesn't provides such method. Furthermore, the methods provide by others seems to complex this particular function. I want a simple and efficient way of doing this. Not a redundant one.

The Solution

The best way is to look into the core of PHP and search for a particular function that do this automatically. I search quite long and finally found preg_match_all from PHP core build. However, it return the number of match element instead of the result of the URL! But if you read closely it can also retrieve the matched result. So, how do you retrieve the images? Answer is regular expression! What i did was as follow,

$content = get_the_content();
preg_match_all('/src=\"https?:\/\/[\S\w]+\"/i', $content, $matches, PREG_SET_ORDER);
foreach($matches as $e)
{
	echo '<div class="slideshow_box"><img width="106px" '.$e[0].'/></div>';
}

Basically, i retrieve the content using WordPress method 'get_the_content()'. Using the preg_match_all PHP function i placed a regular expression that will retrieve all string that start with 'src="' and end with a single '"' quote symbol. You can read more on regular expression on Google (although until now i still can't find a real good reference). it will return the number of match result normally but with the additional variable, $matches which store all matched string, we can easily get all images on a post in WordPress without building additional big function to do this. You can remove 'src=' to retrieve something like 'www.hungred.com' instead of 'src="www.hungred.com' but if you know regular expression better than i do, this will easily be a piece of cake for you.

The Conclusion

This may seems to be an obvious thing to do. But you may be surprise after doing some Google search that many people actually built up function just to accomplished this and no one is sharing such sweet method with you! This is just to write out to help others who are still searching for a better solution than looking at complex method created by others. Hope it help.

7 thoughts on “Tutorial: How to get image path on a post in WordPress efficiently

  1. Is it more performant than using a function ?
    I actually use one wich find me the first image of a post.
    I guess I can use regular exprssion to accomplish this, but before trying learning it, I would know if it's worth the pain 🙂 !

  2. it is definitely better using a regular expression. Imagine having 20 line of code in a function compare to 1-4 lines in regular expression. Furthermore, searching usually uses regular expression to further enhance the performance. No loop is the best.

  3. Thanks for answer 🙂 !
    I read a bit about regex, I try to understand. It's a big challenge for non-coder. How would you display only the first image ?
    I made some tutorials, but can't figure out how to say "only the first chain you find, please" !
    I now understand why regex are so rare in WP functions...

  4. hahaha..ya regex is quite challenging but practice make perfect. The easily way without writing a new code is to add in a break; in the loop after it has done with the first image 🙂

Comments are closed.