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.