Wie wähle ich ein Bild aus der Medienbibliothek in meinem Plugin aus?

14

Ich habe ein Plugin geschrieben, in dem Sie ein kleines Chat-Symbol in der unteren rechten Ecke haben. Ich möchte jedoch, dass der Benutzer ein Bild als Symbol aus der Liste auswählen kann Media Library. Wie kann ich das mit der Wordpress API machen? Das Bild ist eine Einstellung im Plugin (nur vom Administrator änderbar)

Thomas
quelle
2
Sie sollten umfassen die wp.mediabenutzerdefinierten Uploads zu ermöglichen, wählen Sie eine Mediendatei für diese Anforderung. WPSE hat viele Beispiele, aber vielleicht hilft Ihnen dieser Beitrag jeroensormani.com/…. Auch auf Github-Beispielen, insbesondere von ocean90 - github.com/ocean90/media-modal-demo
bueltge

Antworten:

16

Sie sollten verwenden wp.media, um den WordPress Media Manager-Dialog zu verwenden.

Zuerst müssen Sie die Skripte in die Warteschlange stellen:

// 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' );
  }
}

Ihr HTML könnte ungefähr so ​​aussehen (beachten Sie, dass mein Code die Anhangs-ID in der Plugin-Einstellung anstelle der Bild-URL verwendet, wie Sie es in Ihrer Antwort getan haben. Ich denke, es ist viel besser. Wenn Sie beispielsweise ID verwenden, können Sie verschiedene Bildgrößen erhalten, wenn Sie brauche sie):

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

Und die Ajax-Aktion zum Aktualisieren der Bildvorschau:

// 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: Es ist ein kurzes Beispiel, das hier basierend auf einer anderen Antwort geschrieben wurde . Nicht getestet, da Sie nicht genügend Informationen über den genauen Kontext, in dem der Code verwendet wird, oder die genauen Probleme, die Sie haben, angegeben haben.

cybmeta
quelle
2

Verwendung wordpress-settings-api-classdurch Tareq Hasan, URL: https://github.com/tareq1988/wordpress-settings-api-class

mukto90
quelle
2
Ich denke, eine Lösung ohne zusätzliche Bibliotheken ist besser und solider. wie die wp.mediaKontrolle .
Gebäude
1

Da das Symbol für jeden Benutzer unterschiedlich sein soll, müssen Sie das Bild im Benutzerprofil speichern. Dies bedeutet, dass Sie ein zusätzliches Benutzerfeld hinzufügen müssen:

// 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']);
}

Jetzt haben Sie die Möglichkeit, eine Datei vom Computer des Benutzers hochzuladen. Wenn Sie möchten, dass der Benutzer die Datei aus vorhandenen Bildern auswählt, werden die Dinge komplizierter, da Sie anstelle des Standard-Datei-Uploads die Medienbibliothek aufrufen müssen.Steven Slack hat einen hervorragenden Beitrag dazu verfasst, den ich nicht gutheißen möchte, wenn ich seinen Code hier kopiere.

In Ihrer Vorlage müssen Sie drei Möglichkeiten unterscheiden: Benutzer nicht angemeldet, Benutzer angemeldet, aber ohne Symbol, Benutzer angemeldet und mit Symbol. Fügen Sie grob Folgendes hinzu:

$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
quelle
Nein, ich möchte, dass es eine Plugin-Einstellung ist
Thomas
Sie meinen, nur der Administrator der Site sollte in der Lage sein, das Symbol zu ändern und es wird für jeden Besucher / Benutzer das gleiche sein?
cjbj
1
Das wäre ziemlich trivial. Hier ist ein Tutorial dafür: mikejolley.com/2012/12/21/…
cjbj
Ja, es passt das Aussehen (Bild) einer Schaltfläche
Thomas
Ich habe das Tutorial ausprobiert, aber es funktioniert bei mir nicht (veraltet?), Da Frames nicht Teil des js-Objekts sind
Thomas
0

Ich habe diese Lösung verwendet (ohne die Medienbibliothek selbst zu verwenden):

Verwendung von Image-Picker-Lib in einem Modal, das den Wert einer ausgeblendeten Eingabe festlegt, der in den Optionen angegeben wird. Durch Abrufen aller Medien und Echo als Optionen kann der Benutzer ein Bild auswählen.

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
quelle
Ich denke, eine Lösung ohne zusätzliche Bibliotheken ist besser und solider. wie die wp.mediaKontrolle .
Bueltge
@bueltge Ich stimme zu, aber niemand gab eine klare Antwort und ich brauchte Zeit. Wenn also jemand eine gute Antwort gibt, bekommt er das Kopfgeld!
Thomas
Ich sehe deine Antwort auch als Lösung, aber nicht den besten Weg. Nun ist es ein Teil der Fragesteller, Sie;) die Entscheidung zu treffen.
Bueltge
Diese Lösung kann schnell zu einem Problem werden, wenn die Anzahl der Bilder zunimmt. "niemand gab eine klare Antwort" ist keine Entschuldigung; Ihre Frage ist sehr schlecht, daher erhalten Sie schlechte Antworten. Sie zeigen uns keine Anstrengungen, Nachforschungen oder Code, die Sie versucht haben, sondern nur "Ich möchte dies tun, eine gebrauchsfertige Lösung geben", was dasselbe ist, das "den Job für mich erledigen". Suchen Sie nach wp.media, wie von bueltge vorgeschlagen. Es gibt Hunderte von Beispielen hier in WPSE. Wenn Sie Probleme damit haben, stellen Sie eine neue Frage.
Cybmeta
@cybmeta Ich habe versucht, und dies ist mein bester Versuch, also sei kein Esel darüber. Wenn es Ihnen nicht gefällt, schlagen Sie eine bessere Lösung vor.
Thomas