Вопрос или проблема
Я работаю над плагином, который расширяет медиаменеджер, загружает данные на основе JSON для отображения своей собственной коллекции изображений и может загружать их в библиотеку медиа моего WordPress.
Пока у меня есть своя вкладка, я могу разместить свой контент в рамках, но единственный способ, который я нашел для добавления данных JSON в контент, был с помощью «базовых» функций jQuery.
В первую очередь, меня интересует возможность создания собственной коллекции вложений и в основном управление ею с помощью предоставленной функции, чтобы она выглядела, например, как во вкладке «галерея». Чтобы изображения были кликабельными, а выбранные можно было загружать в мою библиотеку.
Вот фрагмент моего расширенного представления контента на данный момент:
wp.media.view.CustomView = wp.media.View.extend({
className: 'media-fap',
initialize: function() {
this.input = "asdf";
var el = this.$el;
jQuery.getJSON( "http://192.168.11.47/fap/wp-json/image", function( data ) {
console.log("получить json");
var output="<ul>";
for(i in data) {
var item = data[i];
output += '<li><img src="' + item.thumbnail + '"></li>';
}
output += '</ul>';
el.append(output);
});
// вставить в представление
//this.$el.append("this.input");
console.log("пользовательский контент");
// перерисовать представление при изменении модели
this.model.on( 'change:custom_data', this.render, this );
},
render: function(){
this.input.value = this.model.get('custom_data');
return this;
},
custom_update: function( event ) {
this.model.set( 'custom_data', event.target.value );
}
});
Мы имеем фрагмент моего расширенного представления контента, который может расширить стандартный медиаменеджер для отображения пользовательской коллекции на основе входных данных JSON:
Пожалуйста, попробуйте эту логику:
initialize: function() {
this.collection = new wp.media.model.Attachments();
this.fetchJSONData();
},
Получить данные JSON и заполнить коллекцию
fetchJSONData: function() {
var view = this;
jQuery.getJSON("http://192.168.11.47/fap/wp-json/image", function(data) {
var attachments = [];
// Преобразовать данные JSON в модели вложений
for (var i in data) {
var item = data[i];
attachments.push(new wp.media.model.Attachment({
id: item.id, // Уникальный ID для каждого изображения
url: item.thumbnail, // URL миниатюры
title: item.title // Любые другие данные, которые вы хотите отслеживать
}));
}
// Добавить полученные данные в коллекцию
view.collection.reset(attachments);
// Перерисовать представление коллекции
view.render();
});
},
Отрисовать коллекцию с использованием встроенного представления вложений
render: function() {
var attachmentsView = new wp.media.view.Attachments({
collection: this.collection
});
this.$el.empty().append(attachmentsView.render().el);
// Обработать событие клика для выбора/снятия выбора изображений
this.attachHandlers(attachmentsView);
return this;
},
Обработка логики клика/выбора изображения
attachHandlers: function(attachmentsView) {
attachmentsView.collection.each(function(attachment) {
var attachmentView = new wp.media.view.Attachment({
model: attachment
});
attachmentView.$el.on('click', function() {
attachment.set('selected', !attachment.get('selected'));
attachmentView.$el.toggleClass('selected', attachment.get('selected'));
if (attachment.get('selected')) {
console.log('Выбрано:', attachment.get('url'));
// Добавьте логику загрузки здесь
}
});
});
}
Ответ или решение
Для создания собственной коллекции в медиа-менеджере WordPress, которая будет основана на данных в формате JSON и позволит загружать выбранные изображения в медиабиблиотеку, вы можете использовать следующий подход. Ниже перечислены необходимые изменения и дополнительные функции для вашего кода.
1. Инициализация коллекции
Сначала мы создадим новую коллекцию для хранения ваших вложений. Мы также реализуем метод для загрузки данных из вашего JSON-источника.
wp.media.view.CustomView = wp.media.View.extend({
className: 'media-fap',
initialize: function() {
this.collection = new wp.media.model.Attachments(); // Создаем коллекцию вложений
this.fetchJSONData(); // Загружаем данные JSON
},
fetchJSONData: function() {
var view = this;
jQuery.getJSON("http://192.168.11.47/fap/wp-json/image", function(data) {
var attachments = [];
// Преобразуем данные JSON в модели вложений
jQuery.each(data, function(index, item) {
attachments.push(new wp.media.model.Attachment({
id: item.id, // Уникальный ID изображения
url: item.thumbnail, // URL миниатюры
title: item.title // Любые другие данные, которые хотите отслеживать
}));
});
// Добавляем полученные данные в коллекцию
view.collection.reset(attachments);
// Перерисовываем представление коллекции
view.render();
});
},
render: function() {
var attachmentsView = new wp.media.view.Attachments({
collection: this.collection
});
this.$el.empty().append(attachmentsView.render().el);
// Обрабатываем событие клика для выбора/снятия выбора изображений
this.attachHandlers(attachmentsView);
return this;
},
attachHandlers: function(attachmentsView) {
attachmentsView.collection.each(function(attachment) {
var attachmentView = new wp.media.view.Attachment({
model: attachment
});
// Добавляем обработчик клика
attachmentView.$el.on('click', function() {
attachment.set('selected', !attachment.get('selected'));
attachmentView.$el.toggleClass('selected', attachment.get('selected'));
if (attachment.get('selected')) {
console.log('Выбрано:', attachment.get('url'));
// Логика загрузки здесь
}
});
});
}
});2. Загрузка выбранных изображений в медиабиблиотеку
Для реализации функционала загрузки выбранных изображений в медиабиблиотеку вам нужно будет создать кнопку и обработчик событий для этого действия. Ниже представлен пример кода для этого:
wp.media.view.CustomView.prototype.renderUploadButton = function() {
var uploadButton = jQuery('<button class="button upload-button">Загрузить выбранные изображения</button>');
var view = this;
uploadButton.on('click', function() {
// Получаем выбранные изображения
var selectedAttachments = view.collection.filter(function(attachment) {
return attachment.get('selected');
});
// Логика загрузки изображений
jQuery.each(selectedAttachments, function(index, attachment) {
// Пример загрузки с использованием REST API
console.log('Загрузка изображения:', attachment.get('url'));
// Здесь должна быть логика загрузки в библиотеку
});
});
this.$el.append(uploadButton);
};
// Вызов метода вставки кнопки при рендеринге
render: function() {
var attachmentsView = new wp.media.view.Attachments({
collection: this.collection
});
this.$el.empty().append(attachmentsView.render().el);
this.attachHandlers(attachmentsView);
// Вставляем кнопку загрузки
this.renderUploadButton();
return this;
}Заключение
С помощью приведённого выше кода вы сможете создать собственную коллекцию изображений в медиа-менеджере WordPress, позволяя пользователям выбирать изображения и загружать их в медиабиблиотеку. Убедитесь, что в вашей среде WordPress включен REST API, чтобы избежать проблем с загрузкой данных.
Этот подход позволяет использовать мощные возможности WordPress медиа-менеджера, расширяя его функциональность под ваши нужды. Если у вас возникнут дополнительные вопросы или сложности, не стесняйтесь задавать их!