preg_replace to add foundation reveal to wordpress image links

2 Views

Was wondering if someone can give me a hand using preg_replace in WordPress to change the way links to images function.

So currently with mootools lazyload enabled I’ve got it spitting out:

Read More
<a href='http://localhost:8080/wp-content/uploads/2015/01/2014-11-26-20.52.53.jpg'><img width="150" height="150" src="http://localhost:8080/wp-content/uploads/2015/01/2014-11-26-20.52.53-150x150.jpg" class="attachment-thumbnail" alt="2014-11-26 20.52.53" /></a>

Ideally I’d like it to all thumbnail links load in a Foundation Reveal Modal with code like this: 

<a href="#" data-reveal-id="2014-11-26-20.52.53"> 
<img src="http://localhost:8080/wp-content/uploads/2015/01/2014-11-26-20.52.53-150x150.jpg">
</a>

<div id="2014-11-26-20.52.53" class="reveal-modal" data-reveal>
<img src="http://localhost:8080/wp-content/uploads/2015/01/2014-11-26-20.52.53.jpg">
<a class="close-reveal-modal">×</a>
</div>

Any suggestions? I’ve tried butchering some similar code – but preg_replace isn’t the easiest syntax to learn.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Ok so I’m close:

    add_filter('the_content', 'addreveal', 12);
add_filter('get_comment_text', 'addreveal');

function addreveal ($content){   
    global $post;
    $pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png)('|")(.*?)>(.*?)</a>/i";
    $replacement = '<a$1href="#" data-reveal-id="myModal">$7</a> <div id="myModal"       class="reveal-modal" data-reveal> <img src="$3.$4"> <a class="close-reveal-modal">&#215;</a>   </div> ';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;

    }

    However I’m a bit confused with the $7 variable – I’d like to split this by / and make the filename without the extension the data-reveal-id. Any suggestions?

  2. This worked for me after some minor tweaks for Foundation 6

    add_filter( 'the_content', 'addreveal', 12 );
add_filter( 'get_comment_text', 'addreveal' );

function addreveal ($content) {
    global $post;
    $pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png)('|")(.*?)>(.*?)</a>/i";
    $replacement = '<a$1href="#" data-open="full">$7</a>
    <div id="full" class="full-image reveal" data-reveal>
        <div class="modal-container">
            <img src="$3.$4">
            <button class="close-button" data-close aria-label="Close reveal" type="button"></button>
        </div>
    </div>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}