Incluindo Entrada Customizada para o Atributo de Dados no Modal de Inserir Mídia


8

Estou tentando adicionar uma entrada de texto ao modal "Inserir mídia" na esperança de poder adicionar um data-atributo html5 à âncora pai das imagens.

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

Até agora, consegui adicionar a entrada ao modal:

insira a descrição da imagem aqui

Usando o código abaixo no meu arquivo 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 );

E eu adicionei o data-fancybox-group=""na âncora 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);

É aqui que eu estou preso ... Eu tenho um lugar para inserir os dados e eu tenho um lugar para os dados irem, mas não tenho certeza de como obter os dados da entrada para os dados atributo -fancybox-group.

Respostas:


3

Dei uma olhada na fonte, infelizmente não vi uma boa maneira de passar as informações sem salvá-las. O que é péssimo - muito tempo - porque isso realmente não é algo que precisa ser salvo.

Uma solução alternativa seria ativar as sessões do PHP colocando o seguinte no início do seu functions.php:

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

Agora você pode usar $_SESSIONvariáveis ​​como esta:

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

Crie seu campo de formulário assim:

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

Faça uso da variável de sessão como esta:

    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 a saída de acordo:

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

É sobre isso. Deve ser bastante auto-explicativo, caso contrário, basta perguntar.


3

Você deve conseguir puxar o 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);

Além disso, você precisará se conectar ao attachment_fields_to_savefiltro, se ainda não o fez, para salvar o campo que você adicionou.

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

Você também deve atualizar sua add_fancybox_inputfunção. Modifique o valor para puxar o 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 );

Isso parece funcionar, o único problema que vejo é que os dados são salvos em páginas diferentes. Como se eu adicionasse um atributo de dados a uma imagem em uma página, eles salvariam esses dados; portanto, se eu usar a mesma imagem em outra página, o atributo de dados precisará ser redefinido.
apaul 14/07/2014

Existe uma maneira de obter a entrada do usuário no atributo de dados sem salvá-lo, ou pelo menos uma maneira de limpar os metadados após a inserção da imagem na página?
apaul 14/07/2014

Estou pensando em delete_post_meta($id, 'fancyboxGroup');excluir o atributo armazenado, mas não tenho certeza de como fazê-lo disparar depois image_send_to_editor.
apaul 14/07/2014

+1 porque esta é a maneira comum de fazer isso. Há algumas coisas que eu mudaria, como não mostrar o campo na página do anexo, manter o campo do formulário vazio e não fazer nenhuma alteração, se for - como fiz na minha resposta.
Nicolai

Uma possibilidade seria fazer uso de transientes com vencimento (curto). Em vez de salvar para postar meta. Dessa forma, não seria necessário se preocupar em excluir os dados. @ apaul34208
Nicolai

0

Não tenho certeza se essa é a melhor coisa para você, mas acho que você pode tentar.

Obtenha os dados do campo de entrada e coloque-os no formulário em uma entrada oculta ou algo assim e faça o atributo de dados quando a janela da Seleção de mídia for fechada

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

Eu sei que isso parece loucura, mas pode ser muito simples para você e pode funcionar.


Se isso é jQuery, eu não acho que é a forma como .data()é feito para ser usado api.jquery.com/jquery.data
apaul

Teste se não tiver certeza. O jQuery.data precisará do elemento (seletor), mas, como o seletor recebe $ ('. fancybox'), você tem o par Chave / Valor, e sim, isso está correto.
Marius Talagiu 17/07/2014
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.