remove anchor element around Wordpress images with filter (or jquery)

Question

I have an anchor element like this:

<a href="/link-to-image/" rel="attachment wp-att-7076"><img src="/uploads/img.jpg" alt="" title="" width="1268" height="377" class="alignnone size-full wp-image-7076" /></a>

(It's the standard way of Wordpress to embed uploaded pictures in a post.)

I want to remove the anchor around the image element, but keep the image. I simply want the image to show without being clickable.

This could be done either with a filter for the content of a post in Wordpress or after the page is loaded with javascript. Filtering in Wordpress would be preferred. I have no idea how to do either of those two options.

Answer 1

Find helpful code here:

Tried out, but caused invalid code.

Your code in ../your_theme/functions.php would look like this:

function remove_anchor($content) {
    // the code for removing the anchor here
    $content =
        preg_replace(
            array('{<a(.*?)(wp-att|wp-content\/uploads)[^>]*><img}', '{</a>}'),
            array('<img',''),
            $content
        );
    return $content;
}

// then use WP's filter/hook system like this:
add_filter('the_content', 'remove_anchor');

Answer 2

Go into your WP theme's folder, edit "functions.php". Add code like this:

function remove_anchor($data)
{
    // the code for removing the anchor here

    // (not sure if you need help there, too).  

    // you will work on the $data string using DOM or regex
    // and then return it at the end


    return $data;
}

// then use WP's filter/hook system like this:
add_filter('the_content', 'remove_anchor');

The add_filter means that every time a post is displayed, the remove_anchor function is called.

jQuery is probably easier, you just need to identify the images and not make them clickable (this is untested)

$(document).ready(function()
{
    $('#post a.some-class-name').click(function()
    {
        return false;
    }
});