php - Wordpress Functions - How to use Replace String func. to add some code

Question

I had previously used a bit of code I found to add "rel = shadowbox" to my links in Wordpress (Which works like a charm).

/*
Plugin Name: Add shadowbox
*/
define("IMAGE_FILETYPE", "(bmp|gif|jpeg|jpg|png)", true);
function addlightboxrel_replace($string) {
    $pattern = '/<a(.*?)href="(.*?).(bmp|gif|jpeg|jpg|png)"(.*?)>/i';
    $replacement = '<a$1href="$2.$3" rel='shadowbox'$4>';
    return preg_replace($pattern, $replacement, $string);
}
add_filter('the_content', 'addlightboxrel_replace');

I had to use a separate plugin to add some gallery images. This plugin however didn't wrap the thumbnail image in an "a" tag (and there's no option to do such). So rather than edit the plugin, I am trying to use the same replace idea to add a link around the image.

I don't quite understand the first replace code, so I'm sure I'm missing something. I'm also trying to replace more than one line of code, so I'm not sure if that's where it's breaking. This is what I have:

define("IMAGE_FILETYPE", "(bmp|gif|jpeg|jpg|png)", true);
function addlink_replace($string) {
    $pattern = '/<ul class="slides"(.*?)><li(.*?)><img(.*?)src=(.*?)><(.*?)li><(.*?)ul>/i';
    $replacement = '<ul class="slides"$1><li$2><a src="$4"><img$3src=$4></a><$5li><$6ul>';
    return preg_replace($pattern, $replacement, $string);
}
add_filter('the_content', 'addlink_replace');

This is the current code being spit out by the plugin:

<ul class="slides" style="width: 600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
    <li style="float: left; display: block; width: 100px;">
        <img width="110" height="110" class="slider-247 slide-243" alt="" src="http://carerforklifts.com/wp-content/uploads/2014/04/F16H-1-110x110.jpg" draggable="false">
    </li>
</ul>

And I would like to wrap a "a" tag around the image, using the current images URL for the a tag's src. (If possible I need to remove that "-110x100" bit at the end of the jpg.

<ul class="slides" style="width: 600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
    <li style="float: left; display: block; width: 100px;">
        <a src="http://carerforklifts.com/wp-content/uploads/2014/04/F16H-1.jpg">
            <img width="110" height="110" class="slider-247 slide-243" alt="" src="http://carerforklifts.com/wp-content/uploads/2014/04/F16H-1-110x110.jpg" draggable="false">
        </a>
    </li>
</ul>

Currently working on this site if that helps: http://www.carerforklifts.com/f16-h/

Answer 1

The regex you have isn't going to match properly, it's missing several things. I've changed and simplified it a bit, so if the structure of the unordered list isn't the same every time you may need to modify this. Here is the regex updated in the function:

function addlink_replace($string) {
    $pattern = '/<ul(.*?)class="slides"(.*?)<img(.*?)src="(.*?)"(.*?)>(.*?)</ul>/is';
    $replacement = '<ul$1class="slides"$2<a href="$4"><img$3src="$4"$5></a>$6</ul>';
    return preg_replace($pattern, $replacement, $string);
}

Basically this will match any unordered list that has the class slides, followed by anything up to an image tag, it will capture anything before the source attribute, it will capture the image source itself, anything in the image tag after the source attribute, then anything up to the closing tag of the unordered list.

The replacement will be the same string, but with the anchor tag around the image with the href attribute the same as the image src.

I made a sample output of this on regex101, there is a detailed explanation in the right side column of what it's matching.