Intereting Posts
Где подключить параметры register_settings для API настроек, когда вы также хотите обновлять параметры вне API настроек? Запрос или функция для удаления в более чем одной таблице post_id wordpress? строить сложные запросы с помощью WP User Query Можно ли запросить категорию с указанными сообщениями? Что такое хороший плагин каталога членов? Страница защищенной паролем + Отображение другой страницы, если не проверено подлинности / авторизировано Изменить хинди на английском языке в соответствии с выбранным значением Различный каталог загрузки на основе типа сообщения в теме wp_insert_post вставить сообщение, но вернуть 0 Как группировать сообщения по месяцам и добавлять разбивку на страницы? Пользовательская таксономия WP_Query для всех условий в таксономии? автоматическое обновление WordPress не запускается Ограничить регистрацию пользователей на электронные письма в одном домене Post-ID в URL-адресе отличается от $ post-> ID update_option в WordPress AJAX

Как изменить wp.media для получения и отображения нескольких изображений

Сценарий jQuery отлично работает, открывая загрузчик wp.media, выбирая или загружая одно изображение и отображая изображение и добавляя его идентификатор привязки к существующему массиву опций с помощью скрытого ввода (на странице настроек моих плагинов). Моя цель – повторное получение идентичных результатов, но для нескольких изображений за раз .

Как и многие до меня, я использовал блок wp.media для таких целей.

Во-первых, я представлю полный рабочий сценарий: он открывает медиа-фрейм, позволяет мне выбирать изображение, захватывает идентификатор вложения изображения для скрытого ввода (самая важная функция), а также обеспечивает предварительное изображение перед сохранить действие, которое при обновлении страницы отображает изображение через его идентификатор привязки, где я его хочу. Большинство из них будут знакомы всем, кто изучил и написал процедуры для использования wp.media, и это конкретное использование (с учетом особенностей настройки моего плагина) хорошо документировано к настоящему времени, по крайней мере, по сравнению с использованием нескольких файлов ,

РАБОЧИЙ ОДИНОЧНЫЙ КОД ИЗОБРАЖЕНИЯ

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

ПОСЛЕДУЮЩИЕ ДИСФУНКЦИОНАЛЬНЫЕ МНОЖЕСТВЕННЫЕ ИЗОБРАЖЕНИЯ

Сочетая фрагменты нескольких подпрограмм отбора отсюда и там, я пробовал различные адаптации. Следующий сегмент из одной такой попытки фокусируется на последовательности клавиш. Я представляю его не потому, что у него был призрак шанса быть полностью успешным, а потому, что он частично успешный и дает некоторую, возможно, полезную и интересную информацию:

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

Хотя последнее, связанное с привязкой «прикрепление-эскиз» из предыдущего примера не работает вообще, поэтому оно не было включено, этот код записывает последний идентификатор вложения, однако было выбрано много изображений, и добавляет его как необходим «val» для скрытого ввода.

Глядя на консоль, я обнаружил, что, однако, на самом деле собрано множество изображений, ID по ID. Тем не менее, attachment.url оказывается зарегистрированным как фрагмент дисфункционального кода вывода URL, по-видимому, из wp-includes/js/backbone.min.js . Может быть, кто-то найдет здесь ключ или, по крайней мере, найдет его забавным (!?).

Я думаю, что хочу захватить идентификаторы по мере их раскрытия, собрать их в массиве и перевести их в другой тип отображения изображений, возможно, с увеличенными идентификаторами html, и я также должен уметь захватить массив для Обработка PHP.

Я уверен, что смогу обработать последние две части (отображение и обработку PHP) после обработки частей «собрать и получить доступ», но на данный момент мое средство с jQuery становится крайне неадекватным. Это привело к часам неудачных проб и ошибок с большим количеством «неопределенных» уведомлений, когда я пытаюсь получить доступ к переменным, которые, как мне кажется, должны быть массивами идентификаторов. Пока ничего, что я пробовал, сделал гораздо больше, чем украсить консоль и в лучшем случае дать мне одну полезную ценность, как уже было описано.

Я надеюсь, что кто-то может дать ответ, который, помимо решения этой конкретной проблемы, будет составлять рабочий шаблон для получения и использования множественного выбора изображения в плагинах, темах и функциях.

PPS: Держи телефон. Думаю, у меня почти есть ответ, достаточно шокирующий.

Хотя мне все же было бы интересно узнать, что придумал настоящий мастер jQuery …;)

Итак, это работает. Я был бы счастлив реализовать и улучшить кредит!

 /** * @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(); }); }); того, как /** * @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(); }); }); того, как /** * @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(); }); });