У меня небольшая проблема с пользовательским виджетом WordPress, который я создаю. Мне нужно реализовать выбор из нескольких изображений из библиотеки мультимедиа, чтобы создать на переднем крае красивую карусель. Во время отладки я заметил, что я могу выбрать несколько элементов из библиотеки, если я нажму кнопку cmd, а затем нажму несколько элементов, но в поле ввода после этого всплывающее окно библиотеки мультимедиа будет закрыто, только один URL будет добавлен, а после нажав кнопку «Сохранить», на внешнем интерфейсе я увижу только одно изображение вместо выбранных. Есть ли какое-либо исправление или способ сохранить несколько URL для карусели?
вот код, который я использую
PHP класс виджетов (я опущу __construct
и widget
метод)
public function form( $instance )
{
$images = isset( $instance['images'] ) ? $instance['images'] : '';
?>
<p>
<label for="<?php echo esc_attr($this->get_field_id('images')); ?>"><?php _e('Slider Images'); ?></label>
</p>
<p style="display:flex;">
<input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('images')); ?>" name="<?php echo esc_attr($this->get_field_name('images')); ?>" value="<?php echo $images; ?>">
<button type="button" class="button button-primary upload_image_button"><?php _e('Seleziona'); ?></button>
</p>
<?php
}
public function update( $new_instance, $old_instance )
{
$instance = $old_instance;
$instance['images'] = $new_instance['images'];
return $instance;
}
Это код js для открытия библиотеки мультимедиа:
(function($){
$(document).ready(function(){
$(document).on('click', '.upload_image_button', function(e){
e.preventDefault();
console.log('clicked!');
var button = $(this);
if(wp.media.frames.file_frame) {
wp.media.frames.file_frame.open();
return;
}
var file_frame = wp.media.frames.file_frame = wp.media({
title: 'Seleziona o carica un immagine',
library: {
type: 'image'
},
button: {
text: 'Seleziona'
},
multiple: true
});
file_frame.on('select', function(){
//var img = file_frame.state().get('selection').first().toJSON();
var img = file_frame.state().get('selection');
img.each(function(selection){
var url = selection.attributes.url;
button.siblings('input').val(url).change();
console.log(url);
});
});
file_frame.open();
});
});
}(jQuery));