When i was working on wordpress theme project client ask me to create a page template where he want to display all the images inserted in that page as a thumbnail and want to display short description at the top of page. Using this code snippet you can easily extract images from wordpress post.

For his requirement I have to extract all the images from that page. For that purpose i searched for a wordpress plugin but cant find anything related to my requirement.

Then by using Regular Expressions i found solution to display images and content separately.

extract images from wordpress post


Create Page Template (! only if you are extracting images from page)

First create a page template you can create that by simply creating a copy of the page.php file in your default wordpress theme and rename it something like your_template.php
For more details how to create page template you can learn that from
Creating WordPress Page templates

Extracting Images from the Page / Post  content

// Get the all post content in a variable
$posttext = $post->post_content;
$posttext1 = $post->post_content;

// We will search for the src="" in the post content
$regular_expression = '~src="[^"]*"~';
$regular_expression1 = '~<img alt="" />]*\ />~';

// WE will grab all the images from the post in an array $allpics using preg_match_all
preg_match_all( $regular_expression, $posttext, $allpics );

// Count the number of images found.
$NumberOfPics = count($allpics[0]);

// This time we replace/remove the images from the content
$only_post_text = preg_replace( $regular_expression1, '' , $posttext1);
/*Only text will be printed*/
echo $only_post_text;

// Check to see if we have at least 1 image
if ( $NumberOfPics > 0 )
/* Here you can do what ever you want
I used https://code.google.com/p/timthumb/ timthumb script to crop all the images and display in thumbnails.
for that upload the timthumb.php file in your theme folder.

for ( $i=0; $i < $NumberOfPics ; $i++ )
{			$str1=$allpics[0][$i];
<img alt="" src=".$imgpath." />' alt=""/>
<?php } ?>

Make sure you insert all the above code inside the wordpress loop

<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
/* All the code explained above*/
<?php endwhile; endif; ?>

You can then add the LightBox Gallery Script using any LightBox Gallery script.

Display First Image From Post

If you want to display first image from the post then use this code. You can set a default image if there are no images in the post.

Just Add this function in your wordpress themes function.php file and call the function in wordpress loop where you want to display the first image.

function catch_first_image() {
global $post, $posts;
$first_img = '';
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
// no image found display default image instead
<a title="Permanent Link to " rel="bookmark"><?php echo "<img alt="" src=".$first_img." />"; ?></a>
<?php }
 // Your default Image
echo '<img alt="" src="default_image.jpg" /> ';

If you have any questions or any suggestions send a comment.