Bagaimana cara memilih gambar dari Media Library di plugin saya?

14

Saya telah menulis sebuah plugin di mana Anda memiliki ikon obrolan kecil di sudut kanan bawah, namun saya ingin pengguna dapat memilih gambar sebagai ikon dari Media Library. Bagaimana saya bisa melakukan ini dengan Wordpress API? Gambar adalah pengaturan dalam plugin (hanya dapat diubah oleh admin)

Thomas
sumber
2
Anda harus menyertakan wp.mediauntuk mengizinkan unggahan khusus, pilih file media untuk persyaratan ini. WPSE memiliki banyak contoh, tetapi mungkin posting ini membantu Anda jeroensormani.com/... Juga Anda temukan pada contoh github, terutama dari ocean90 - github.com/ocean90/media-modal-demo
bueltge

Jawaban:

17

Anda harus menggunakan wp.mediadialog Manajer Media WordPress.

Pertama, Anda perlu membuat skrit:

// As you are dealing with plugin settings,
// I assume you are in admin side
add_action( 'admin_enqueue_scripts', 'load_wp_media_files' );
function load_wp_media_files( $page ) {
  // change to the $page where you want to enqueue the script
  if( $page == 'options-general.php' ) {
    // Enqueue WordPress media scripts
    wp_enqueue_media();
    // Enqueue custom script that will interact with wp.media
    wp_enqueue_script( 'myprefix_script', plugins_url( '/js/myscript.js' , __FILE__ ), array('jquery'), '0.1' );
  }
}

HTML Anda bisa seperti ini (perhatikan kode saya menggunakan ID lampiran pada pengaturan plugin daripada url gambar seperti yang Anda lakukan dalam jawaban Anda, saya pikir itu jauh lebih baik. Misalnya, menggunakan ID memungkinkan Anda untuk mendapatkan ukuran gambar yang berbeda ketika Anda butuh mereka):

$image_id = get_option( 'myprefix_image_id' );
if( intval( $image_id ) > 0 ) {
    // Change with the image size you want to use
    $image = wp_get_attachment_image( $image_id, 'medium', false, array( 'id' => 'myprefix-preview-image' ) );
} else {
    // Some default image
    $image = '<img id="myprefix-preview-image" src="https://some.default.image.jpg" />';
}

 <?php echo $image; ?>
 <input type="hidden" name="myprefix_image_id" id="myprefix_image_id" value="<?php echo esc_attr( $image_id ); ?>" class="regular-text" />
 <input type='button' class="button-primary" value="<?php esc_attr_e( 'Select a image', 'mytextdomain' ); ?>" id="myprefix_media_manager"/>ç

myscript.js

jQuery(document).ready( function($) {

      jQuery('input#myprefix_media_manager').click(function(e) {

             e.preventDefault();
             var image_frame;
             if(image_frame){
                 image_frame.open();
             }
             // Define image_frame as wp.media object
             image_frame = wp.media({
                           title: 'Select Media',
                           multiple : false,
                           library : {
                                type : 'image',
                            }
                       });

                       image_frame.on('close',function() {
                          // On close, get selections and save to the hidden input
                          // plus other AJAX stuff to refresh the image preview
                          var selection =  image_frame.state().get('selection');
                          var gallery_ids = new Array();
                          var my_index = 0;
                          selection.each(function(attachment) {
                             gallery_ids[my_index] = attachment['id'];
                             my_index++;
                          });
                          var ids = gallery_ids.join(",");
                          jQuery('input#myprefix_image_id').val(ids);
                          Refresh_Image(ids);
                       });

                      image_frame.on('open',function() {
                        // On open, get the id from the hidden input
                        // and select the appropiate images in the media manager
                        var selection =  image_frame.state().get('selection');
                        var ids = jQuery('input#myprefix_image_id').val().split(',');
                        ids.forEach(function(id) {
                          var attachment = wp.media.attachment(id);
                          attachment.fetch();
                          selection.add( attachment ? [ attachment ] : [] );
                        });

                      });

                    image_frame.open();
     });

});

// Ajax request to refresh the image preview
function Refresh_Image(the_id){
        var data = {
            action: 'myprefix_get_image',
            id: the_id
        };

        jQuery.get(ajaxurl, data, function(response) {

            if(response.success === true) {
                jQuery('#myprefix-preview-image').replaceWith( response.data.image );
            }
        });
}

Dan tindakan Ajax untuk menyegarkan pratinjau gambar:

// Ajax action to refresh the user image
add_action( 'wp_ajax_myprefix_get_image', 'myprefix_get_image'   );
function myprefix_get_image() {
    if(isset($_GET['id']) ){
        $image = wp_get_attachment_image( filter_input( INPUT_GET, 'id', FILTER_VALIDATE_INT ), 'medium', false, array( 'id' => 'myprefix-preview-image' ) );
        $data = array(
            'image'    => $image,
        );
        wp_send_json_success( $data );
    } else {
        wp_send_json_error();
    }
}

PD: ini adalah contoh cepat yang ditulis di sini berdasarkan jawaban lain . Tidak diuji karena Anda tidak memberikan informasi yang cukup tentang konteks yang tepat kode akan digunakan atau masalah yang sebenarnya Anda miliki.

cybmeta
sumber
2

Gunakan wordpress-settings-api-classoleh Tareq Hasan, Url: https://github.com/tareq1988/wordpress-settings-api-class

mukto90
sumber
2
Saya pikir solusi tanpa perpustakaan tambahan lebih baik, solid; suka wp.mediakontrol .
bueltge
1

Karena Anda ingin ikonnya berbeda untuk setiap pengguna, Anda harus menyimpan gambar di profil pengguna. Ini berarti Anda perlu menambahkan bidang pengguna tambahan:

// create the field
add_action( 'show_user_profile', 'wpse_235406_chaticon' );
add_action( 'edit_user_profile', 'wpse_235406_chaticon' );

function wpse_235406_chaticon ($user) { 
    echo '
    <h3>Chat Icon</h3>
    <table class="form-table">
        <tr>
            <th><label for="chaticon">Chat Icon</label></th>
            <td>
                <input type="file" name="chaticon" id="chaticon" value="' . esc_attr (get_the_author_meta ('chaticon', $user->ID)) . '" class="file-upload" /><br />
                <span class="description">Please select your chat icon.</span>
            </td>
        </tr>
    </table>';
}

// save the field
add_action( 'personal_options_update', 'wpse_235406_chaticon_save' );
add_action( 'edit_user_profile_update', 'wpse_235406_chaticon_save' );

function wpse_235406_chaticon_save ($user_id) {
    if (current_user_can ('edit_user', $user_id)) 
        update_usermeta ($user_id, 'chaticon', $_POST['chaticon']);
}

Sekarang, ini memberi Anda kemungkinan untuk mengunggah file dari komputer pengguna. Jika Anda ingin pengguna memilih file dari gambar yang ada, hal-hal menjadi lebih rumit, karena Anda perlu memanggil perpustakaan media sebagai ganti dari upload file default. Steven Slack telah menulis posting yang bagus tentang bagaimana melakukan ini, yang saya tidak ingin menerima pujian dengan menyalin kode-nya di sini.

Dalam templat Anda, Anda harus membedakan tiga kemungkinan: pengguna tidak masuk, pengguna masuk tetapi tidak memiliki ikon, pengguna masuk dan memiliki ikon. Secara kasar, sertakan ini:

$current_user = wp_get_current_user();
if ( 0 == $current_user->ID ) {
  ... do what you want to do for not logged in users ...
  }
else {
  $icon = get_user_meta ($current_user->ID, 'chaticon');
  if (empty($icon)) {
    ... default icon with link to upload possibility ...
    }
  else {
     ... display $icon ...
     }
cjbj
sumber
tidak, saya ingin ini menjadi pengaturan plugin
Thomas
Maksud Anda hanya admin situs yang dapat mengubah ikon dan itu akan sama untuk setiap pengunjung / pengguna?
cjbj
1
Itu akan sangat sepele. Berikut tutorial untuk itu: mikejolley.com/2012/12/21/…
cjbj
ya, itu mengkustomisasi tampilan (gambar) tombol
Thomas
Saya mencoba tutorialnya, tetapi itu tidak berhasil bagi saya (usang?) Karena bingkai bukan bagian dari objek js
Thomas
0

Saya menggunakan solusi ini (tanpa menggunakan Perpustakaan Media itu sendiri):

Menggunakan image-picker-lib di dalam modal yang menetapkan nilai input tersembunyi, yang diposting ke opsi. Dengan mendapatkan semua media dan menggemakannya sebagai opsi, saya bisa membiarkan pengguna memilih img.

HTML

<input id="image" name="image" class="validate" type="image" src="<?php echo esc_attr(get_option('image_url')); ?>" id="image_url" width="48" height="48" />
<br>
<a href="#imageModal" class="waves-effect waves-light btn modal-trigger">
    change
</a>
<input id="image_url" name="image_url" type="text" value="" hidden />

PHP / HTML

<div id="imageModal" class="modal">
    <div class="modal-content">
        <select class="image-picker show-html">
            <option data-img-src="<?php echo CM_PATH . "/img/chat_general.png" ?>"  value="0"></option>
            <?php
            $query_images_args = array(
                'post_type'   => 'attachment',
                'post_mime_type' => 'image',
                'post_status' => 'inherit',
                'posts_per_page' => - 1,
            );

            $query_images = new WP_Query( $query_images_args );
            $i = 1;
            foreach ( $query_images->posts as $image ) {
                ?>
                <option data-img-src="<?php echo wp_get_attachment_url($image->ID); ?>"  value="<?php echo $i; ?>"></option>
                <?php
                $i  ;
            }
            ?>
        </select>
    </div>
    <div class="modal-footer">
        <a class="waves-effect waves-light btn change">Choose</a>
    </div>
</div>
</div>
</div>

JS

 $(".change").on("click", function() {
 +            var url = $(".image-picker > option:selected").attr("data-img-src");
 +            $("#image").attr("src", url);
 +            $("#image_url").attr("value", url);
 +            $("#imageModal").closeModal();
 +        });
Thomas
sumber
Saya pikir solusi tanpa perpustakaan tambahan lebih baik, solid; suka wp.mediakontrol .
bueltge
@ Bueltge Saya setuju, tapi tidak ada yang memberikan jawaban langsung dan saya butuh waktu. Jadi, jika seseorang memberikan jawaban yang bagus, mereka mendapatkan hadiahnya!
Thomas
Saya melihat jawaban Anda juga sebagai solusi, tetapi bukan cara terbaik. Sekarang ini adalah bagian dari penulis pertanyaan, Anda;) untuk membuat keputusan.
bueltge
Solusi ini dapat dengan cepat menjadi masalah karena jumlah gambar meningkat. "tidak ada yang memberi jawaban langsung" bukan alasan; pertanyaan Anda sangat buruk, sehingga Anda mendapatkan jawaban yang buruk. Anda tidak menunjukkan kepada kami upaya, penelitian, atau kode apa pun yang telah Anda coba, hanya "Saya ingin melakukan ini, berikan solusi yang siap pakai", yang sama dengan "melakukan pekerjaan untuk saya". Cari wp.media sesuai saran bueltge; ada ratusan contoh di sini di WPSE. Jika Anda memiliki masalah dalam menggunakannya, posting pertanyaan baru tentangnya.
cybmeta
@cybmeta saya sudah mencoba dan ini adalah usaha terbaik saya, jadi jangan terlalu keras tentang itu. Jika Anda tidak menyukainya, usulkan solusi yang lebih baik.
Thomas