Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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!

share|improve this question
add comment

1 Answer

up vote 0 down vote accepted

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 );
share|improve this answer
    
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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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