How to add <li> element to the list of adjacent images?

admin管理员组

文章数量:1026989

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');

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');

• images

Share Improve this question edited Mar 25, 2019 at 15:35 szalalala asked Mar 25, 2019 at 14:08 szalalalaszalalala 122 bronze badges 3

• 3 what does the PHP that builds your output look like currently? – mrben522 Commented Mar 25, 2019 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 Commented Mar 25, 2019 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 Commented Mar 25, 2019 at 14:24

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

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');

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');

• images

Share Improve this question edited Mar 25, 2019 at 15:35 szalalala asked Mar 25, 2019 at 14:08 szalalalaszalalala 122 bronze badges 3

• 3 what does the PHP that builds your output look like currently? – mrben522 Commented Mar 25, 2019 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 Commented Mar 25, 2019 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 Commented Mar 25, 2019 at 14:24

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： How to add ltligt element to the list of adjacent images