I’ve found a solution by myself!
With two lines of code I’m now able to save all the selected images and then retrive them on the front-end.
I have added an array in the JS code part:
// media library script
(function($){
$(document).ready(function(){
$(document).on('click', '.upload_image_button', function(e){
e.preventDefault();
var button = $(this);
var file_frame = wp.media.frames.file_frame = wp.media({
title: 'Seleziona o carica un immagine',
library: {
type: 'image'
},
button: {
text: 'Select'
},
multiple: true
});
file_frame.on('select', function(){
var img = file_frame.state().get('selection');
var urls = [];
img.each(function(selection){
urls.push(selection.attributes.url)
button.siblings('input').val(urls).change();
});
});
file_frame.open();
});
});
}(jQuery));
Then on the php part I’ve implemented an explode()
and a foreach()
loop to get the saved urls and place them inside the slider img tag:
public function widget( $args, $instance )
{
$images = explode( ',', $instance['images'] );
ob_start();
?>
<div class="swiper-container logo-slider" id="featured-logo-slider">
<div class="swiper-wrapper" id="featured-logo">
<?php foreach( $images as $image ): ?>
<img class="swiper-slide" src="https://wordpress.stackexchange.com/questions/355953/<?php echo $image; ?>" alt="" width="100" id="client-logo"/>
<?php endforeach; ?>
</div>
<div class="swiper-scrollbar"></div>
</div>
<?php
echo ob_get_clean();
}