Agregar entrada personalizada para el atributo de datos en el modal de inserción de medios


8

Estoy tratando de agregar una entrada de texto al modal "Insertar medios" con la esperanza de poder agregar un data-atributo html5 al ancla principal de las imágenes.

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

Hasta ahora he podido agregar la entrada al modal:

ingrese la descripción de la imagen aquí

Usando el siguiente código en mi archivo functions.php:

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 );

Y he agregado el data-fancybox-group=""al ancla usando:

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);

Aquí es donde estoy atascado ... Tengo un lugar para ingresar los datos y tengo un lugar para que vayan los datos, pero no estoy seguro de cómo obtener los datos de la entrada a los datos -fancybox-group atributo.

Respuestas:


3

He echado un vistazo a la fuente, desafortunadamente no he visto una buena manera de pasar la información sin guardarla. Lo cual apesta, a lo grande, porque esto realmente no es algo que deba guardarse.

Una solución alternativa sería habilitar las sesiones de PHP poniendo lo siguiente al comienzo de su functions.php:

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

Ahora puede usar $_SESSIONvariables como esta:

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

Cree su campo de formulario de esta manera:

    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
    );

Utilice la variable de sesión de esta manera:

    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
    );

Modifique la salida en consecuencia:

    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
    );

Eso es todo. Debería explicarse por sí solo, de lo contrario solo pregunte.


3

Debería poder tirar del campo usando 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);

Además, tendrá que engancharse al attachment_fields_to_savefiltro, si aún no lo ha hecho, para guardar el campo que agregó.

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);

También debe actualizar su add_fancybox_inputfunción. Modifique el valor para extraer el campo fancybox.

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 );

Esto parece funcionar, el único problema que veo es que los datos se guardan en diferentes páginas. Al igual que si agrego un atributo de datos a una imagen en una página, guarda esos datos, por lo que si uso la misma imagen en otra página, será necesario restablecer el atributo de datos.
— apaul

¿Hay alguna forma de obtener la entrada del usuario al atributo de datos sin guardarlo, o al menos una forma de borrar los metadatos después de insertar la imagen en la página?
— Apaul

Estoy pensando en delete_post_meta($id, 'fancyboxGroup');eliminar el atributo almacenado, pero no estoy seguro de cómo hacer que se active después image_send_to_editor.
— apaul

+1 porque esta es la forma común de hacerlo. Hay algunas cosas que cambiaría, como no mostrar el campo en la página adjunta, mantener el campo de formulario vacío y no hacer ningún cambio si es así, como hice en mi respuesta.
— Nicolai

Una posibilidad sería hacer uso de transitorios con vencimiento (corto). En lugar de guardar para publicar meta. De esa manera, uno no tendría que preocuparse por eliminar los datos. @ apaul34208
— Nicolai

0

No estoy seguro de si esto es lo mejor para ti, pero supongo que podrías intentarlo.

Obtenga los datos del campo de entrada y colóquelos en el formulario en una entrada oculta o algo así y haga el atributo de datos cuando se cierre la ventana de Selección de medios

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

Sé que esto suena loco, pero podría ser muy simple para ti y podría ser el truco.


Si eso es jQuery, no creo que sea así como .data()se debe usar api.jquery.com/jquery.data
— apaul

Por favor, pruebe si no está seguro. jQuery.data necesitará el elemento (selector) pero dado que el selector recibe $ ('. fancybox'), entonces tiene su par Clave / Valor, y sí, eso es correcto.
— Marius Talagiu
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.