0

I'm trying to create a html list of adjacent images (which are added by user, for example inside of a post content). Right now the output code looks like this

<ul class="myclass">
<img src="">
<img src="">
</ul>

but I want to transform it into:

<ul class="myclass">
<li><img src=""></li>
<li><img src=""></li>
</ul>

I have tried to define regex that will find elements inside ul class="myclass" with "/" signs, but it seems to work with code that doesn't have line breaks. Is it possible to match the result I want to achive/is using functions filters a right way to do it?

right now my functions.php looks like this:

    function add_carousel( $content) {
      $pattern = '((<img.*?>){2,})';
      $replacement = '<div class="orbit" role="region" data-orbit>
        <div class="orbit-wrapper">
          <div class="orbit-controls">
            <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
            <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
          </div>
          <ul class="orbit-container">
          $0
          </ul>
          </div>
          </div>';
          $content = preg_replace( $pattern, $replacement, $content );
      return $content;
    }
    add_filter('the_content', 'add_carousel');
function add_carousel_items( $content ){
$content = preg_replace('/<ul class="orbit-container">\\s*?(<img.*?>)?\\s*<\\/ul>/s', '\1', $content);

return $content;

}
add_filter('the_content', 'add_carousel_items');
  • 3
    what does the PHP that builds your output look like currently? – mrben522 Mar 25 at 14:12
  • Or are you saying that your user entered that HTML block, the ul with imgs nested directly beneath it, and you want to automatically fix that bad input? – Rup Mar 25 at 14:19
  • I want to transform user non-html input if there is more than two adjacent images. The structure I want to achive is based on foundation orbit. – szalalala Mar 25 at 14:24
0

There's a few problems here. Your regex is pretty broken. You should be using a tool like regex101 to test that.
I think for your first function you need to add the possibility of newlines between the image tags like so:

/(<img.*?>\r?\n?){2,}/

You can add * before the ?'s if you want to grab multiple image tags when there's multiple newlines between them. For your second function it looks like your escaping inaccurately. try this:

/<ul class="orbit-container">\s*?(<img.*?>)?\s*<\/ul>/

Your second potential issue is that you're running both those functions on the same filter and I would guess that the order they run in is important to you. add priorities to the add_filter calls as a third parameter. the default is (I think) 10. So make yours 10 and 11 or 9 and 10 or something like that, whatever works best for you.

  • Thank you for your tips. Is it possible to get each <img> and wrap them one by one in <li>, of course only those images which are placed in specific <ul>? – szalalala Apr 4 at 11:45
  • yeah but we're getting into some really complicated regex at this point. I'll see if I can figure it out – mrben522 Apr 4 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.