web-dev-qa-db-fra.com

Télécharger des images depuis un plugin personnalisé en utilisant le modal multimédia

Je crée un plugin personnalisé et les utilisateurs doivent pouvoir télécharger plusieurs images. Je veux qu’ils puissent le faire via la page multimédia intégrée, mais à travers un modal/pop-up à partir de la page de configuration des plugins.

Quelque chose de similaire se produit lorsque vous utilisez Thrive Architect et que vous sélectionnez l'onglet Image, un modal apparaît et il ressemble exactement à la médiathèque de l'écran d'administration. Comment puis-je y arriver?

J'ai fait une recherche sur wordpress media modal et elle retourne Référence de Javascript/wp.media mais je ne suis pas tout à fait sûr que ce soit ce que je cherche.

Est-ce une fonctionnalité intégrée à WordPress ou devrai-je trouver ma propre façon de le créer?

Enfin, toutes les suggestions que d'autres ont pu trouver sont également les bienvenues! Toujours sympa de savoir quelles solutions les autres ont trouvées.

pluginsimagesmediamedia-librarymedia-modal
1
Brandon Benefield

Ah!

Le problème classique auquel toute personne soucieuse de l'expérience de ses utilisateurs est confrontée est confronté.

D'après mon expérience, wp.media est la voie à suivre.

Ceci est pas mon code, mais il fait le travail. Je l'ai utilisé beaucoup.

Je vais expliquer ce que ça fait, pièce par pièce:

// Source: https://vedmant.com/using-wordpress-media-library-in-widgets-options/
jQuery(document).ready(function ($) {

   $(document).on("click", ".upload_image_button", function (e) {
      e.preventDefault();
      var $button = $(this);


      // Create the media frame.
      var file_frame = wp.media.frames.file_frame = wp.media({
         title: 'Select or upload image',
         library: { // remove these to show all
            type: 'image' // specific mime
         },
         button: {
            text: 'Select'
         },
         multiple: false  // Set to true to allow multiple files to be selected
      });

      // When an image is selected, run a callback.
      file_frame.on('select', function () {
         // We set multiple to false so only get one image from the uploader

         var attachment = file_frame.state().get('selection').first().toJSON();

         $button.siblings('input').val(attachment.url).change();

      });

      // Finally, open the modal
      file_frame.open();
   });
});

La première chose est la première. Nous avons besoin d'un bouton, lié à une entrée , pour en savoir plus à ce sujet plus tard. Cela peut être dans le personnaliseur, ou n'importe où vous en avez besoin:

<button class="upload_image_button">Upload Image</button>

Ensuite, nous avons besoin d'un ingesteur de données lié à ce bouton. Malheureusement, ceci est hors de portée, mais si vous faites cela dans un widget, ceci aura un effet:

<p>
    <label for="<?php echo $this->get_field_id( 'image' ); ?>">Image:</label>
    <br>
    <input class="widefat" id="<?php echo $this->get_field_id( 'image' ); ?>" name="<?php echo $this->get_field_name( 'image' ); ?>" value="<?php echo $instance['image'];?>" />
    <br>
    <button class="upload_image_button">Upload Image</button>
</p>

Jusqu'ici, nous ne faisons que cibler le bouton, continuant ainsi:

  // Create the media frame.
  var file_frame = wp.media.frames.file_frame = wp.media({
     title: 'Select or upload image',
     library: { // remove these to show all
        type: 'image' // specific mime
     },
     button: {
        text: 'Select'
     },
     multiple: false  // Set to true to allow multiple files to be selected
  });

Le code est bien commenté, mais voici la documentation correspondante: https://codex.wordpress.org/Javascript_Reference/wp.media

Nous appelons donc simplement l'API WP JS pour accéder au cadre multimédia. Maintenant, pour obtenir le chemin du fichier, nous avons besoin de:

file_frame.on('select', function () {

Chaque fois que nous sélectionnons quelque chose dans le cadre, récupérons le chemin du fichier en fichier au format JSON AJAX, et nous le laisserons utiliser -

var attachment = file_frame.state().get('selection').first().toJSON();

Rappelez-vous ce bouton qui devait être connecté à une entrée? Oui, alors nous insérons ce lien que nous venons d'entrer dans cette entrée:

$button.siblings('input').val(attachment.url).change();

Et ainsi, un nouveau lien vers votre image est né.

3
Jonathan Guerin