1

I've used Wordpress for years. Whenever I would add an image to an article, I manually would write out all of the HTML for every image. I also used an image lightbox plugin called Highslide for people to enlarge my thumbnails. An example thumbnail that links to a larger image looks like this in my manual HTML:

<a href="large-file.jpg" rel="highslide" class="highslide"><img src="thumbnail.gif"></a>

But now I've installed the latest version of Wordpress and see how easy it is to add images directly into the article without having to write any HTML out at all. The output I get is this:

<a href="http://site.com/newwp/wp-content/uploads/2012/12/file.jpg"><img class="alignright size-medium wp-image-24971" alt="file" src="http://file.com/newwp/wp-content/uploads/2012/12/file-196x300.jpg" width="196" height="300" /></a>

What I would like to do is modify Wordpress to add the rel="highslide" and class="highslide" automatically to the link whenever I insert a linked image so that the highslide plugin works. I guess the final result would look like this:

<a href="http://site.com/newwp/wp-content/uploads/2012/12/file.jpg" rel="highslide" class="highslide"><img class="alignright size-medium wp-image-24971" alt="file" src="http://file.com/newwp/wp-content/uploads/2012/12/file-196x300.jpg" width="196" height="300" /></a>

I've looked through the core files but can't figure out where Wordpress generates the HTML when it inserts images. So does anyone know how to modify Wordpress to add these two attributes? I would really appreciate your help! :) Thank you!

0

This filter checks if an anchor is in the html image send to the editor and if so adds rel and class to the anchor.

function add_highslide_attr( $html ) {
    preg_match_all('/(<a[^>]*>)(.*)/i', $html, $result);

    if( !isset($result) || !isset($result[1][0]) || ! $result[1][0] )
        return $html;

    $anchor = $result[1][0];

    if( strstr($anchor, 'rel=') )
        $anchor = str_replace('rel="', 'rel="highslide ', $anchor);
    else
        $anchor = str_replace('href=', 'rel="highslide" href=', $anchor);

    if( strstr($anchor, 'class=') )
        $anchor = str_replace('class="', 'class="highslide ', $anchor);
    else
        $anchor = str_replace('href=', 'class="highslide" href=', $anchor);

    $html = $anchor . $result[2][0];

    return $html;
}
add_filter( 'image_send_to_editor', 'add_highslide_attr', 10 );
  • Wow thank you! Where do I put this script? – SurferBoy Dec 28 '12 at 4:05
  • In your functions.php – Rob Vermeer Dec 28 '12 at 4:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.