Comment modifier wp.media pour obtenir et afficher plusieurs images
Mon script jQuery fonctionne très bien pour ouvrir le programme de téléchargement wp.media, sélectionner ou télécharger une seule image, afficher l’image et ajouter son ID de pièce jointe à un tableau d’options existant via une entrée masquée (sur la page des paramètres de mes plugins). Mon objectif est de reproduire des résultats identiques, mais pour plusieurs images à la fois .
Comme beaucoup d’autres avant moi, j’ai eu du mal à utiliser wp.media à de telles fins.
Tout d’abord, je présenterai le script de travail complet: il ouvre le cadre multimédia, me permet de sélectionner une image, de capturer l’ID de pièce jointe d’image pour l’entrée masquée (la fonction la plus cruciale) et de fournir également une image d’aperçu avant une action de sauvegarde qui, lors de l'actualisation de la page, affiche l'image via son ID de pièce jointe exactement où je le souhaite. La plupart d’entre elles seront familières à tous ceux qui ont fait des recherches et écrit des routines pour utiliser wp.media, et cette utilisation particulière (en mettant de côté les particularités de la configuration de mon plugin) est maintenant bien documentée, du moins en comparaison avec l’utilisation de fichiers multiples. .
CODE D'IMAGE SIMPLE DE TRAVAIL
jQuery(document).ready( function($) {
var myplugin_media_upload;
$('#myplugin-change-image').click(function(e) {
e.preventDefault();
// If the uploader object has already been created, reopen the dialog
if( myplugin_media_upload ) {
myplugin_media_upload.open();
return;
}
// Extend the wp.media object
myplugin_media_upload = wp.media.frames.file_frame = wp.media({
title: button_text.title,
button: { text: button_text.button },
multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
myplugin_media_upload.on( 'select', function() {
attachment = myplugin_media_upload.state().get(
'selection' ).first().toJSON();
console.log(attachment); //irrelevant to functionality but useful
//adds the ID to the hidden input
$('#myplugin-featured-image').val( attachment.id );
//provides the preview image
$('#myplugin-thumbnail').empty();
$('#myplugin-thumbnail').append(
'<img src="' + attachment.url +
'" class="attachment-thumbnail myplugin-preview" />' );
$('#myplugin-new-global').show();
});
//Open the uploader dialog
myplugin_media_upload.open();
});
});
ESSAI TOTALEMENT MULTIPLE D'IMAGES MULTIPLES DYSFONCTIONNELLES
En combinant des extraits de routines de sélection multiples d'ici et d'ailleurs, j'ai essayé diverses adaptations. Le segment suivant d'un tel essai se concentre sur la séquence de touches. Je ne le présente pas parce qu'il avait une chance de réussir complètement, mais parce qu'il est en partie un succès et qu'il donne des informations éventuellement utiles et intéressantes:
// Extend the wp.media object
myplugin_media_upload = wp.media.frames.file_frame = wp.media({
title: button_text.title,
button: { text: button_text.button },
multiple: true //get multiple images
});
//When a file is selected, grab the URL and set it as the text field's value
myplugin_media_upload.on( 'select', function() {
var selection = myplugin_media_upload.state().get( 'selection' );
selection.map( function( attachment ) {
attachment.toJSON();
//shows each attachment ID:
console.log(attachment.id);
//last is captured for:
$('#myplugin-featured-image').val( attachment.id );
//captures code fragment (see notes)
console.log(attachment.url);
});
});
Bien que le dernier élément de l'exemple précédent relatif à la "pièce jointe-vignette" ne fonctionne pas du tout, il n'a donc pas été inclus, ce code capturera le dernier ID de pièce jointe, quel que soit le nombre d'images sélectionnées, et l'ajoute en tant que nécessaire "val" pour l'entrée cachée.
En regardant la console, je constate que peu importe le nombre d’images sélectionnées qui sont effectivement collectées, ID par ID. Cependant, attachment.url finit par s'enregistrer en tant que fragment de code dérivant d'URL dysfonctionnel, apparemment à partir de wp-includes/js/backbone.min.js. Peut-être que quelqu'un trouvera un indice ici, ou du moins le trouvera un peu amusant (!?).
Je pense que je veux capturer les ID au fur et à mesure qu'ils sont exposés, les assembler dans un tableau et les convertir en boucle dans un type d'affichage d'image différent, probablement avec des ID HTML incrémentés, et j'ai également besoin de pouvoir capturer le tableau pour PHP traitement.
Je suis presque certain de pouvoir gérer les deux dernières parties (affichage et traitement PHP) une fois que les parties "assembler et accéder à un tableau" ont été traitées, mais à ce stade, mon installation avec jQuery devient terriblement inadéquate. Cela a conduit à des heures d'essais et d'erreurs erronés, avec de nombreux avis "non définis" lorsque j'essaie d'accéder à des variables qui, à mon avis, devraient être des tableaux d'identifiants. Jusqu'à présent, rien de ce que j'ai essayé n'a fait beaucoup plus que décorer la console et, au mieux, me donner une valeur utilisable telle que décrite précédemment.
J'espère que quelqu'un pourra fournir une réponse qui, outre la résolution de ce problème particulier, constituera un modèle de travail permettant d'obtenir et d'utiliser plusieurs sélections d'images dans des plug-ins, des thèmes et des fonctions.
PPS: Tiens le téléphone Je pense avoir presque une réponse, assez choquant.
Bien que je sois toujours curieux de voir ce qu’un vrai maître jQuery a créé…;)
Alors ça marche. Je serais heureux de mettre en œuvre et de créditer les améliorations!
/**
* @Script: WordPress Multiple Image Selection in jQuery
* @Version: 0.1
* @Author: CK MacLeod
* @Author URI: http://ckmacleod.com
* @License: GPL3
*/
jQuery(document).ready( function( $ ) {
var myplugin_media_upload;
$('#myplugin-change-image').click(function(e) {
e.preventDefault();
// If the uploader object has already been created, reopen the dialog
if( myplugin_media_upload ) {
myplugin_media_upload.open();
return;
}
// Extend the wp.media object
myplugin_media_upload = wp.media.frames.file_frame = wp.media({
//button_text set by wp_localize_script()
title: button_text.title,
button: { text: button_text.button },
multiple: true //allowing for multiple image selection
});
/**
*THE KEY BUSINESS
*When multiple images are selected, get the multiple attachment objects
*and convert them into a usable array of attachments
*/
myplugin_media_upload.on( 'select', function(){
var attachments = myplugin_media_upload.state().get('selection').map(
function( attachment ) {
attachment.toJSON();
return attachment;
});
//loop through the array and do things with each attachment
var i;
for (i = 0; i < attachments.length; ++i) {
//sample function 1: add image preview
$('#myplugin-placeholder').after(
'<div class="myplugin-image-preview"><img src="' +
attachments[i].attributes.url + '" ></div>'
);
//sample function 2: add hidden input for each image
$('#myplugin-placeholder').after(
'<input id="myplugin-image-input' +
attachments[i].id '" type="hidden"
name="myplugin_attachment_id_array[]" value="' +
attachments[i].id + '">'
);
}
});
myplugin_media_upload.open();
});
});