Manipulate images from WordPress post’s content with Regular Expressions


A couple of months ago I got requested to deliver a website that would let the client publish online brochures. These brochures featured image slideshows with a description text, tags, categories etc. Many of us use WordPress not only as a blog platform but also as a multifaceted CMS. There are many features WordPress give that go beyond the blog format and that with the right adjustments and/or plugins, can be used to provide a complete solid solution. Thats why we choose to build this up on WordPress.

Looked around to see the wp plugins available but found that none of them suited the needs of this project. Wanted to keep this very simple and easy for the client, so the best solution I came up was to let client dump any image he wanted in the post’s content-box and deal with it later with regular expressions:

// Start the Loop
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
<?php
// Set the post content to a variable
$szPostContent = $post->post_content;
// Define the pattern to search
$szSearchPattern = '~<img [^>]* />~';
// Run preg_match_all to grab all the images and save the results in $aPics
preg_match_all( $szSearchPattern, $szPostContent, $aPics );
// Count the results
 $iNumberOfPics = count($aPics[0]);
// Check to see if we have at least 1 image
if ( $iNumberOfPics > 0 )
{
     // Now here you would do whatever you need to do with the images
     // For this example I'm just going to echo them
     for ( $i=0; $i < $iNumberOfPics ; $i++ )
     {
          echo $aPics[0][$i];
     };
};
// ...finish the loop, etc

The code above should be fairly easy to understand. Once you printed the images its very much possible that you will like to print the text content too, the problem is that if you use the_content(); function images will be printed again as well. To solve this I had to make a little workaround to remove the images and print only the rest of the content:

// This time we replace/remove the images from the content
$szDescription = preg_replace( $szSearchPattern, '' , $szPostContent);
// Apply filters for correct content display
$szDescription = apply_filters('the_content', $szDescription);
// Echo the Content
echo $szDescription;

That’s it, quite simple solution that is indeed very powerful, Hope you enjoyed it, Cheers!

Reactions (32)

  1. Pingback Manipulate images from Wordpress post’s content with Regular Expressions | CrazyLeaf Design Blog

  2. Pingback Manipulate Images from WordPress Post’s Content with Regular Expressions

  3. Pingback 10 Killer WordPress Hacks | How-To | Smashing Magazine

  4. Pingback 10 Killer WordPress Hacks « ArticleSave

  5. Pingback 10 Killer WordPress Hacks | How2Pc

  6. Pingback 10 Killer WordPress Hacks | Web Hosting and Domains

  7. Pingback 10 Killer WordPress Hacks | Castup

  8. Pingback AMB Album » 10 Killer WordPress Hacks

  9. Pingback Mellowish » Blog Archive » 10 Cool WordPress Hacks

  10. Wow! This is a great work around over using custom fields.

    I was wondering, how do you control class output? Also is there a way to use it with conjunction to phpthumb?

    • Hi John, glad you like it. You can easily control the class output and incorporate phpthumb, to do this you have to edit the loop that prints the found images:
      in the part that says echo $aPics[0][$i]; replace for something like this:

      echo '<img src="' . $aPics[0][$i] . '" class="yourclass"/>';

      And then add to the src=”” the path required to use phptumb. Hope that guides you on the correct direction.

  11. Pingback Önemli birkaç Wordpress Hilesi | Diğer Sitelerden

  12. Pingback 6 วิธีที่จะทำให้ Wordpress เจ๋งขึ้น • Mekz Connecting

  13. Pingback 10个杀手级WordPress技巧 : 互联网的那点事…

  14. Pingback 10 Killer WordPress Hacks | Bookmarks

  15. Hi Matt,

    I want to retrieve only the image src path. Not whole image tag.

    Please help me to get the src path of all the images.
    Thanks
    Neel

    • Hi Neel,

      Try using: $szSearchPattern = '~src="[^"]*"~';
      this should retrieve only the src attribute instead of the whole img element.
      cheers

  16. Pingback 70 Very Useful Wordpress Hacks & Tricks » De Web Times - Sharing Useful Resources.

  17. Hi, that’s really useful. I try it on a new website and it works perfectly. But I’ve got a problem, I didn’t know regex before and I don’t find something similar to your ‘~]*\ />~’. I have to find but also .
    So I put this code for
    – $szSearchPattern = ‘~]*\ />~’;
    But I only have the and not the .
    How can I do this?
    Thanks for the tutorial.

  18. Pingback 10 Killer WordPress Hacks « 从小做起@fea.net.cn

  19. Pingback Automatically Get Images on Post Content

  20. your code worked like a charm! i’m wondering if there is a way to make the images clickable so the original image can be viewed?
    the ultimate goal would be to have them work with the lightbox plugin, but being able to click them would be helpful.
    this is what i have in the echo line:

    echo

    thanks so much

  21. Awesome script, thanks! I was wondering, is there a way of getting the TOTAL image count for an entire post page? I tried modifying it, but it only seems to work in the loop.

  22. Hi Matt, thanks for this code snippet. Very useful!

  23. Hello that’s very nice!
    I just try to add something new to your code.
    I want in the part “the_content” to add the last image of the post.
    How can I manage to do this?
    Thanks.

  24. Hi Matt and thanks for this cool stuff. It helped me a lot but not at all. I wanted to get the images and “transform” them so for example an will be written to

    Is that possible? and the most intresting question: how?
    ;-)

    Thanks in advance,
    Chris