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.

What I'm trying to do is edit the output of image_send_to_editor so that i can make the anchor that wraps around the image have a specific class & rel.

I plan to basically make each image that gets inserted into a post become fancybox capable without having to be in a gallery or using a plugin.

Heres what I have thus far but I need help filling in the blanks...

<?php
add_filter( 'image_send_to_editor', 'fancy_capable', 10, 7);
function fancy_capable($html, $id, $alt, $title, $align, $url, $size ) {
// not sure what to do here???
return "$html";
}
?>
share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

Your best bet here would be to use jQuery to grab any link that links to an image and tell it to use fanceybox.

jQuery(document).ready(function($){
    $('a[href$="jpg"], a[href$="png"], a[href$="jpeg"]').fancybox();
});

If you want this to work just for your post content areas use this:

$('.post-content a[href$="jpg"], .post-content  a[href$="png"], .post-content a[href$="jpeg"]').fancybox();

You will need to replace .post-content with whatever HTML parent element wraps the content area.

share|improve this answer
    
So this isnt possible through that filter then I take it? –  Mr.Brown Sep 16 '11 at 4:18
    
I'm sure it is, but it's hard to test because you're dealing with PHP and Javascript actions happening all at once. You'll minus out the nightmare of trying to get this to work with this one line of jQuery. I've used it for years since it casts a wide net over the DOM to find any links appropriate for fancybox. –  Brian Fegter Sep 16 '11 at 4:20
    
I thought that this filter takes place during "insertion of an image into a post" though, not when the page loads each time, no? –  Mr.Brown Sep 16 '11 at 4:25
    
You are correct, but because JS events are happening (closing the iframe content, thickbox close, insert HTML into editor, etc...) there is no real place to output and debug what you're trying to do unless you add a Javascript tag in there and log stuff to the developer tools or firebug console. –  Brian Fegter Sep 16 '11 at 4:33
    
Hmmm..ok. So is your JQuery script calling "all" jpg's, png's, and jpeg's though because that wont work for what Im trying to achieve, I only want to effect images inserted into posts. –  Mr.Brown Sep 16 '11 at 4:37
show 5 more comments

This is actually pretty easy... the return $html; is just going to return to the editor whatever you send to it... so you could do something like this:

<?php 
       add_filter( 'image_send_to_editor', 'fancy_capable', 10, 7);
       function fancy_capable($html, $id, $alt, $title, $align, $url, $size ) {
           $url = wp_get_attachment_url($id); // Grab the current image URL
           $html = '<a href="' . $url .  '" class="fancybox" rel="your-rel"><img src="..." /></a>';
           return $html;
       }
?>

You can also just insert a shortcode (which may be more familiar to the user) in place of the HTML... and then have your shortcode do the work on the backend.

<?php 
       add_filter( 'image_send_to_editor', 'fancy_capable', 10, 7);
       function fancy_capable($html, $id, $alt, $title, $align, $url, $size ) {
           $url = wp_get_attachment_url($id); // Grab the current image URL
           $html = '[image src="' . $url .  '" fancybox="true" /]';
           return $html;
       }
?>
share|improve this answer
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.