Help on RegEx needed (for the_content filter)

  • Hi there,

    since I use a CSS hack to add a small icon to external links (a[href^=”http:”]), I have to add a class to each image in my post (img class=”imagelink”) with a “no icon”-style. It simply sets the background back from the icon to “transparent”. Otherwise, I’d have this icon even on images that link to external sites, which looks ugly and which I don’t want.

    Here is what I want to achieve:

    I want to hook into the_content filter with add_filter(). The function hooking in should use regular expressions to find all image tags that are surrounded by link tags. Then, class="imagelink" should automatically be added to the img-tag. Therefore, I do not need to pay attention to add an “imagelink”-class every time I link an image to an external website.

    Here is an example:

    <a href="https://link.to.external.site" target="_blank"><img src="image.used.for.link" /></a>

    should become

    <a href="https://link.to.external.site" target="_blank"><img class="imagelink" src="image.used.for.link" /></a>

    I think that preg_replace() can be used for this, but I have absolutely no idea how I should construct the pattern and the replacement string, since I have no great experience with RegEx.

    The other problem is that I really only want to add the class="imagelink" without modifying any of the other parameters of the link- or the img-tag.

    I’ve tried this with a (German) RegEx Tester and it seems to be get close:

    $pattern = ‘/<a(.*)><img src=(.*)><\/a>/’;

    The problem is the greediness of (*.), since I do not want a lot of code to be matched by that pattern.

    In addition to this, I have absolutely NO IDEA what the replacement should look like. :’-(

    I’d be grateful for some help on this.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter saphod

    (@saphod)

    Someone? I am sure there must be some RegEx pro’s among us! ??

    Thread Starter saphod

    (@saphod)

    Oh, please, come on!

    Just an idea:
    mdkart has a plugin called Add Lightbox – in which he uses a regexp to add a rel attribute to image anchors.
    I customized the code a little bit, and it works for images.

    So let’s take the original regexp (with a variable):
    $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i"

    This will be replaced by the extended version:
    $replacement = '<a$1href=$2$3.$4$5 rel="lightbox['.$post->ID.']"$6>$7</a>';

    My intention was to customize this code so that I can add a not a real, but a class – and not to the anchor, but to the img tag:

    $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)class=('|\")([^>]*)('|\")(.*?)\/>/i";
$replacement = '<img$1src=$2$3.$4$5$6class=$7$8 myclass$9$10$11/>';

    So, summarized, as I see (and I’m really a beginner!!!), the original plugin code customized to your needs would look something like this:

    add_filter('the_content', 'addlightboxrel_replace', 12);
add_filter('get_comment_text', 'addlightboxrel_replace');
function addlightboxrel_replace ($content)
{   global $post;
    $pattern = "/<a(.*?)href=('|\")([^>]*)('|\")(.*?)><img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)class=('|\")([^>]*)('|\")(.*?)\/><\/a>/i";
    $replacement = '<a$1href=$2$3$4$5><img$6src=$7$8.$9$10$11class=$12$13 <strong>imagelink</strong>$14$15$16/><\/a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

    This is really long, a little bit creepy, and I’m sure that not the simplest solution (and applies to each anchored image) – but surely does the job until you don’t find a more elegant and poetic one.

    Short follow-up:

    The right code is

    add_filter('the_content', 'addlightboxrel_replace', 12);
add_filter('get_comment_text', 'addlightboxrel_replace');
function addlightboxrel_replace ($content)
{   global $post;
    $pattern = "/<a(.*?)href=('|\")([^>]*)('|\")(.*?)><img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)class=('|\")([^>]*)('|\")(.*?)\/><\/a>/i";
    $replacement = '<a$1href=$2$3$4$5><img$6src=$7$8.$9$10$11class=$12$13 imagelink$14$15$16/><\/a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

    (change: no … within the final code)

    Thread Starter saphod

    (@saphod)

    Wow, that’s some hard liquor, I will have to look at that a long time to understand it, but I get the idea, so a big THANKYOU!

    I’ll try to remember to give a feedback when I managed to use it for my purposes. ??

    Hey Saphod, thanks for your update. Since I’m trying to use this method on another website, and it doesn’t work at all.
    :I

    I don’t know what’s happening here, and even WP reinstall or theme switch didn’t help. It would really be great if you could feedback about your experience.

    Thread Starter saphod

    (@saphod)

    Hmm, I tried your regex with RegExr ( https://gskinner.com/RegExr/ ), and it didn’t work. Try testing it yourself, it is a nice tool. Unfortunately, I do not have so much time to test, but I’ll try when there is some. ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Help on RegEx needed (for the_content filter)’ is closed to new replies.