0

So many jQuery light boxes these days use the 'rel' attribute to identify objects that should be targeted. Unfortunately when it comes to Wordpress, when inserting a thumbnail/link, to add a rel attribute you have to either edit the html source code or pull up a separate pop-up after the initial insert. This makes the process complicated for some less confident users.

What I want to be able to do is include, in the insert media pop-up, a checkbox to add a rel='lightbox' attribute to the tag when inserted.

While I am quite confident when it comes to theme development, I wouldn't know where to start modifying Wordpress admin functionality.

Can somebody point me in the right direction?

0

This is a tough one, but I would start here: Add new "Insert Into Post" button with another function. Below is some code to get started with adding the field via http://rider.sofarider.com/wordpress-tips-and-tricks/extra-input-field-to-add-an-image-panel/ From there, try something like the second code block.

<?php
function attachment_url_extra( $form_fields, $post ) {
    // input field relates to attachments
        // my_field and _my_field is what you should replace with your own
    $post->post_type == 'attachment';
    $form_fields[ 'my_field' ] = array(
        'label' => __( 'MY FIELD' ),
        'input' => 'text',
        'value' => get_post_meta( $post->ID, '_my_field', true )
    );
    $form_fields[ 'my_field' ][ 'label' ] = __( 'MY FIELD' );
    $form_fields[ 'my_field' ][ 'input' ] = 'text';
    $form_fields[ 'my_field' ][ 'value' ] = get_post_meta( $post->ID, '_my_field', true );

    return $form_fields;
}

add_filter( 'attachment_fields_to_edit', 'attachment_url_extra', NULL, 2 );

function attachment_url_extra_save( $post, $attachment ) {

    if( isset( $attachment[ 'my_field' ] ) ) {
        if( trim( $attachment[ 'my_field'] ) == '' ) $post[ 'errors' ][ 'my_field' ][ 'errors' ][] = __( 'Error! Something went wrong.' );
        else update_post_meta( $post[ 'ID' ], '_my_field', $attachment[ 'my_field' ] );
    }
    return $post;

}

Now customizing the actual insert.

add_filter( 'attachment_fields_to_save', 'attachment_url_extra_save', NULL, 2 );
?>

add_filter('media_send_to_editor', 'my_filter_iste', 20, 3);

function my_filter_iste($html, $id, $caption, $title, $align, $url, $size, $alt) {
    $attachment = get_post($id); //fetching attachment by $id passed through

    $mime_type = $attachment->post_mime_type; //getting the mime-type
    if (substr($mime_type, 0, 5) == 'video') { //checking mime-type
        $src = wp_get_attachment_url( $id );
        $html = '[video src="'.$src.'"]';  
    }
    return $html; // return new $html
}
0

In the examples below I'm using fancybox, but you can also use lightbox of course. I prefer fancybox because is very lightweight and the way I'm using it I don't need to include it as a plugin but I can include the js and css in my existing files. Faster and easier!

If you don't necessarily need a checkbox, but just want a rel='lightbox' on each image that's linked to a file, you can use the function below. What it also does, is add a rel='lightbox[POST ID]' to each gallery item. For fancybox, this way when a user navigates through the images, each 'loop' will start at the first and end at the last image of that galley. Useful when displaying multiple posts with multiple galleries on one page.

The function:

function fancybox_rel($attachment_link)
{   
    global $post;
    $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '<a$1rel="fancybox[%LIGHTID%]" href=$2$3.$4$5  $6>$7</a>';
    $attachment_link= preg_replace($pattern, $replacement, $attachment_link);
    $attachment_link = str_replace("%LIGHTID%", $post->ID, $attachment_link);
    return $attachment_link;
}
add_filter('wp_get_attachment_link', 'fancybox_rel'); 

To ensure that fancybox doesn't load for every image but only for images which can be clicked on (images/galleries must be set to link to 'file'), you can use javascript to add the fancybox classes:

$('.gallery-icon').addClass('fancybox');

So this way you don't need a checkbox if you want images with a link to be automatically viewed in a lightbox/fancybox. Makes it even easier for the user!

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.