8

I'm trying to add a text input to the "Insert Media" modal in the hopes of being able to add an html5 data- attribute to the images' parent anchor.

<a class="fancybox" href="..." data-fancybox-group=" "> <-- This part
<img class="wp-image-871" src="..." alt="..." width="245" height="333" />
</a>

So far I've been able to add the input to the modal:

enter image description here

Using the code below in my functions.php file:

function add_fancybox_input( $form_fields, $post ) {
$form_fields['fancyboxGroup'] = array(
'label' => 'fancybox group',
'input' => 'text',
'value' => 'testing',
'helps' => 'use this to group images in fancybox',
);
return $form_fields;
}

add_filter( 'attachment_fields_to_edit', 'add_fancybox_input', 10, 2 );

And I've added the data-fancybox-group="" to the anchor using:

function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
  $classes = 'fancybox'; // separated by spaces, e.g. 'img image-link'

  // check if there are already classes assigned to the anchor
  if ( preg_match('/<a.*? class=".*?">/', $html) ) {
    $html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
  } else {
    $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" data-fancybox-group="" >', $html);
  }
  return $html;
}
add_filter('image_send_to_editor','give_linked_images_class',10,8);

This is where I'm stuck... I've got a place to enter the data and I've got a place for the data to go, but I'm not sure how to get the data from the input to the data-fancybox-group attribute.

3
+50

I have taken a look at the source, unfortunately I haven't seen a nice way to pass the information without saving it. Which sucks - big time - because this really isn't anything that needs to be saved.

A workaround would be to enable PHP Sessions by putting the following at the beginning of your functions.php:

    if (!session_id()) {
        session_start();
    }

Now you are able to use $_SESSION variables, like this:

    $_SESSION[ 'your-key' ] = 'your-value';

Create your form field like this:

    function wpse_154330_attachment_fields_to_edit( $form_fields, $post ) {
        $current_screen = get_current_screen();
        // we are not saving, so no need to show the field on the attachment page
        if ( $current_screen->id == 'attachment' ) {
            return $form_fields;
        }
        $form_fields['fancyboxGroup'] = array(
            'label' => 'fancybox group',
            'input' => 'text',
            'value' => '', // leave the value empty
            'helps' => 'use this to group images in fancybox',
        );
        return $form_fields;
    }
    add_filter(
        'attachment_fields_to_edit',
        'wpse_154330_attachment_fields_to_edit',
        10,
        2
    );

Make use of the session variable like this:

    function wpse154330_save_attachment_field( $post, $attachment ) {
        // we're only setting up the variable, not changing anything else
        if ( isset( $attachment[ 'fancyboxGroup' ] ) {
            $_SESSION[ 'fancyboxGroup' ] = $attachment[ 'fancyboxGroup' ];
        }
        return $post;
    }
    add_filter(
        'attachment_fields_to_save',
        'wpse154330_save_attachment_field',
        10,
        2
    );

Modify the output accordingly:

    function wpse154330_image_send_to_editor(
        $html,
        $id,
        $caption,
        $title,
        $align,
        $url,
        $size,
        $alt = ''
    ) {
        // no need to modify the output, if no fancybox group is given
        if (
            empty( $_SESSION[ 'fancyboxGroup' ] )
            || ! isset( $_SESSION[ 'fancyboxGroup' ] )
        ) {
            return $html;
        }
        $classes = 'fancybox';
        if ( preg_match( '/<a.*? class=".*?">/', $html ) ) {
            $html = preg_replace(
                '/(<a.*? class=".*?)(".*?>)/',
                '$1 ' . $classes . '$2',
                $html
            );
        } else {
            $html = preg_replace(
                '/(<a.*?)>/',
                '$1 class="'
                    . $classes
                    . '" data-fancybox-group="'
                    . $_SESSION[ 'fancyboxGroup' ]
                    . '" >',
                $html
            );
        }
        unset( $_SESSION[ 'fancyboxGroup' ] );
        return $html;
    }
    add_filter(
        'image_send_to_editor',
        'wpse154330_image_send_to_editor',
        10,
        8
    );

Thats about it. Should be pretty much self-explaining, otherwise just ask.

3

You should be able pull the field using get_post_meta.

function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
  $classes = 'fancybox'; // separated by spaces, e.g. 'img image-link'

  // check if there are already classes assigned to the anchor
  if ( preg_match('/<a.*? class=".*?">/', $html) ) {
    $html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
  } else {
    $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" data-fancybox-group="'.get_post_meta($id, 'fancyboxGroup', true).'" >', $html);
  }
  return $html;
}
add_filter('image_send_to_editor','give_linked_images_class',10,8);

Also, you'll need to hook into the attachment_fields_to_save filter, if you haven't already, to save the field you added.

function wpse154330_save_attachment_field($post, $attachment) {
    if( isset($attachment['fancyboxGroup']) ){
            update_post_meta($post['ID'], 'fancyboxGroup', $attachment['fancyboxGroup']);
        }

    return $post;
}

add_filter( 'attachment_fields_to_save','wpse154330_save_attachment_field', 10, 2);

You should also update your add_fancybox_input function. Modify the value to pull the fancybox field.

function add_fancybox_input( $form_fields, $post ) {
$form_fields['fancyboxGroup'] = array(
'label' => 'fancybox group',
'input' => 'text',
'value' => get_post_meta($post->ID, 'fancyboxGroup', true),
'helps' => 'use this to group images in fancybox',
);
return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'add_fancybox_input', 10, 2 );
  • This seems to work, the only issue I see is that the data is saved across different pages. As in if I add a data- attribute to an image on one page it saves that data, so if I use the same image on another page the data- attribute will need to be reset. – apaul Jul 14 '14 at 16:48
  • Is there a way to get the user input to the data- attribute without saving it, or at least a way to wipe the meta data after the image is inserted to the page? – apaul Jul 14 '14 at 16:49
  • I'm thinking delete_post_meta($id, 'fancyboxGroup'); should delete the stored attribute, but I'm not sure how to get it to fire after image_send_to_editor. – apaul Jul 14 '14 at 17:36
  • +1 because this is the common way to do it. There are some things I'd change, like not showing the field on the attachment page, keeping the form field empty and not doing any changes if it is - like I did in my answer. – Nicolai Jul 14 '14 at 23:21
  • One possibility would be making use of transients with (short) expiration. Instead of saving to post meta. That way one wouldn't have to worry about deleting the data. @apaul34208 – Nicolai Jul 14 '14 at 23:32
0

I am not sure if this is the best thing for you but I guess you could give it a try.

Get the data from the input field and place it in the form on a hidden input or something and do the data attribute when the window of the Media Selection will close

$inputValue = $('.some_class').val();
$('.fancybox').data('fancybox-group', $inputValue);

I know this sounds crazy but it might just be very simple for you and it might do the trick.

  • If that's jQuery, I don't think that is how .data() is meant to be used api.jquery.com/jquery.data – apaul Jul 16 '14 at 14:09
  • Please test if you are not sure. jQuery.data will need the element (selector) but since the selector is given $('.fancybox') then you have they Key / Value pair, and yes that is correct. – Marius Talagiu Jul 17 '14 at 11:59

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.