Menambahkan input khusus untuk atribut data dalam menyisipkan modal media

8

Saya mencoba menambahkan input teks ke modal "Insert Media" dengan harapan bisa menambahkan data-atribut html5 ke jangkar induk gambar.

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

Sejauh ini saya sudah bisa menambahkan input ke modal:

masukkan deskripsi gambar di sini

Menggunakan kode di bawah ini di file functions.php saya:

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

Dan saya telah menambahkannya data-fancybox-group=""ke anchor menggunakan:

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

Di sinilah saya terjebak ... Saya punya tempat untuk memasukkan data dan saya punya tempat untuk data itu, tapi saya tidak yakin bagaimana cara mendapatkan data dari input ke data Atribut -fancybox-group.

apaul
sumber

Jawaban:

3

Saya telah melihat sumbernya, sayangnya saya belum melihat cara yang bagus untuk meneruskan informasi tanpa menyimpannya. Yang menyebalkan - waktu besar - karena ini sebenarnya bukan apa-apa yang perlu diselamatkan.

Solusinya adalah untuk mengaktifkan Sesi PHP dengan meletakkan yang berikut di awal Anda functions.php:

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

Sekarang Anda dapat menggunakan $_SESSIONvariabel, seperti ini:

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

Buat bidang formulir Anda seperti ini:

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

Manfaatkan variabel sesi seperti ini:

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

Ubah output sesuai:

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

Itu saja. Seharusnya cukup banyak menjelaskan sendiri, kalau tidak hanya bertanya.

Nicolai
sumber
3

Anda harus dapat menarik bidang menggunakan 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);

Selain itu, Anda harus menghubungkan ke attachment_fields_to_savefilter, jika belum, untuk menyimpan bidang yang Anda tambahkan.

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

Anda juga harus memperbarui add_fancybox_inputfungsi Anda . Ubah nilai untuk menarik bidang 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 );
nothingtosee
sumber
Ini sepertinya berhasil, satu-satunya masalah yang saya lihat adalah bahwa data disimpan di halaman yang berbeda. Seperti jika saya menambahkan atribut data ke gambar pada satu halaman, data itu disimpan, jadi jika saya menggunakan gambar yang sama di halaman lain, atribut data harus diatur ulang.
apaul
Apakah ada cara untuk mendapatkan input pengguna ke atribut data tanpa menyimpannya, atau setidaknya cara untuk menghapus data meta setelah gambar dimasukkan ke halaman?
apaul
Saya berpikir delete_post_meta($id, 'fancyboxGroup');harus menghapus atribut yang disimpan, tetapi saya tidak yakin bagaimana memecatnya image_send_to_editor.
apaul
Memberi +1 karena ini adalah cara umum untuk melakukannya. Ada beberapa hal yang akan saya ubah, seperti tidak menampilkan bidang pada halaman lampiran, menjaga bidang formulir kosong dan tidak melakukan perubahan jika itu - seperti yang saya lakukan dalam jawaban saya.
Nicolai
Satu kemungkinan akan memanfaatkan transien dengan kedaluwarsa (pendek). Alih-alih menyimpan untuk mengirim meta. Dengan begitu orang tidak perlu khawatir menghapus data. @ apaul34208
Nicolai
0

Saya tidak yakin apakah ini yang terbaik untuk Anda, tetapi saya rasa Anda bisa mencobanya.

Dapatkan data dari bidang input dan letakkan dalam formulir di input tersembunyi atau sesuatu dan lakukan atribut data saat jendela Pemilihan Media akan ditutup

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

Saya tahu ini kedengarannya gila, tetapi mungkin sangat sederhana bagi Anda dan mungkin berhasil.

Marius Talagiu
sumber
Jika itu jQuery, saya tidak berpikir itulah .data()yang dimaksudkan untuk digunakan api.jquery.com/jquery.data
apaul
Silakan uji jika Anda tidak yakin. jQuery.data akan membutuhkan elemen (selector) tetapi karena selector diberikan $ ('. fancybox') maka Anda memilikinya pasangan Key / Value, dan ya itu benar.
Marius Talagiu