Comment sélectionner une image de la médiathèque dans mon plugin?

10

J'ai écrit un plugin dans lequel vous avez une petite icône de discussion en bas à droite. Cependant, je souhaite que l'utilisateur puisse choisir une image en tant qu'icône à partir du Media Library . Comment puis-je faire cela avec l'API Wordpress? L'image est un paramètre du plugin (modifiable uniquement par l'administrateur)

    
posée Thomas 09.08.2016 - 09:52

5 réponses

11

Vous devez utiliser wp.media pour utiliser la boîte de dialogue Gestionnaire de médias WordPress.

Tout d'abord, vous devez mettre en file d'attente les scritps:

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

Votre code HTML pourrait ressembler à ceci (notez que mon code utilise l'ID de pièce jointe dans le paramètre du plugin au lieu de l'URL de l'image, comme vous l'avez fait dans votre réponse. Je pense que c'est beaucoup mieux. Par exemple, utiliser ID vous permet d'obtenir différentes images. tailles quand vous en avez besoin):

$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"/>';}<?phpecho$image;?><inputtype="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');
                        ids = jQuery('input#myprefix_image_id').val().split(',');
                        ids.forEach(function(id) {
                          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 );
            }
        });
}

Et l'action Ajax pour actualiser l'aperçu de l'image:

// 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: il s'agit d'un exemple rapide écrit ici, basé sur autre réponse . Non testé car vous n'avez pas fourni suffisamment d'informations sur le contexte exact dans lequel le code sera utilisé ou sur les problèmes que vous rencontrez.

    
réponse donnée cybmeta 18.08.2016 - 13:29
1

Puisque vous voulez que l'icône soit différente pour chaque utilisateur, vous devez stocker l'image dans le profil de l'utilisateur. Cela signifie que vous devez ajouter un champ utilisateur supplémentaire:

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

Maintenant, cela vous donne la possibilité de télécharger un fichier depuis l'ordinateur de l'utilisateur. Si vous souhaitez que l'utilisateur sélectionne le fichier parmi des images existantes, les choses deviennent plus compliquées, car vous devez alors appeler la médiathèque au lieu du téléchargement de fichier par défaut. Steven Slack a écrit un excellent message comment faire cela, ce que je ne sais pas 'ne veut pas prendre le crédit pour en copiant-collant son code ici.

Dans votre modèle, vous devez distinguer trois possibilités: utilisateur non connecté, utilisateur connecté mais sans icône, utilisateur connecté et ayant une icône. En gros, incluez ceci:

$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 ...
     }
    
réponse donnée cjbj 15.08.2016 - 13:13
1

Utilisez wordpress-settings-api-class par Tareq Hasan, URL: enlace

.
  • Incluez la classe principale class.settings-api.php dans votre plugin. (ce fichier enlace )
  • Définissez vos options. Vous devez utiliser 'type' => 'file' pour ajouter un téléchargeur de média. (Voir cet exemple pour mieux comprendre enlace .
réponse donnée mukto90 16.08.2016 - 16:07
1

Un code complet avec le plugin que vous pouvez trouver sur cette URL: enlace

Facile à utiliser, il suffit de copier / coller le code à la place souhaitée

    
réponse donnée Rohit Kaushik 06.01.2018 - 06:35
0

J'ai utilisé cette solution (sans utiliser la médiathèque elle-même):

Utilisation de image-picker-lib dans un modal définissant la valeur d'une entrée masquée, qui est publiée dans les options . En récupérant tous les médias et en les faisant écho, je peux laisser l’utilisateur choisir un 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();
 +        });
    
réponse donnée Thomas 16.08.2016 - 16:23

Lire d'autres questions sur les étiquettes