Multiple image selection custom widget

Question

I've created a swiper custom carousel as template part of a custom theme. I want to widgetize this component of the theme to have more control over the contents displayed. It's used as an horizontal logo slider and for now will use a single post with a gallery inside to display the brands logos. How I can create a modal popup for the widget I'm writing to open the wp media library and select multiple images to use as images for the slider? Is this possible? Here is the actual code:

<?php
$args = array(
'post_type' => 'post',
'name' => 'brands logos'
);
$logo_img = new WP_Query( $args );
?>
<div class="row" style="margin-top:1em;margin-bottom:1em;">
<?php if( $logo_img->have_posts() ): while( $logo_img->have_posts() ): $logo_img->the_post();
$logo_gallery = get_post_gallery_images( $post->ID );
if( $logo_gallery ): ?>
<div class="swiper-container logo-slider" id="clients-logo-slider">
  <div class="swiper-wrapper" id="client-logo-wrapper">
<?php  foreach($logo_gallery as $logo ): ?>
    <img class="swiper-slide" src="<?php echo $logo; ?>" alt="" width="100" id="client-logo"/>
<?php endforeach; ?>
<?php endif; ?>
  </div>
  <div class="swiper-scrollbar"></div>
</div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
</div>

<script type="text/javascript">
(function($){
  $(document).ready(function(){
    var swiperLogos = new Swiper('.logo-slider',{
      autoplay: {
      delay: 5000,
      },
      slidesPerView: 'auto',
      slidesPerColumnFill: 'row',
      scrollbar: {
        el: '.swiper-scrollbar',
        draggable: true,
      },
    });
  });
}(jQuery));
</script>

I will put this inside a class to have a functional widget to use in the theme to replace the template part. Here is the code I'm writing to wrap the existing one. I've noticed that I'm unable to select multiple images. NB: the code is not complete yet. I'm able to write a widget, but I need to solve first the multiple image selection problem.

class FeaturedLogoSlider extends WP_Widget {


  public function __construct()
  {
    parent::__construct(
      'featured-brands',
      'Featured Brands Slider',
      array(
        'description' => __('Featured brands logos slider', '')
      )
    );
    add_action( 'widgets_init', array($this, 'initSidebar') );
    add_action( 'wp_enqueue_scripts', array($this, 'initScripts') );
  }

  public function initScripts()
  {
    wp_enqueue_script( 'media-upload' );
    wp_enqueue_media();
    wp_enqueue_script( 'medialib-script', plugins_url( 'medialib-script.min.js' ,__FILE__), array('jquery'), null );
    // swiper js ?
    //wp_enqueue_script();
  }

  public function initSidebar()
  {
    register_sidear(
      array(
        'id'    => '',
        'name'  => '',
        'description' => ''
      )
    );

    register_widget( '' );
  }

  public function widget( $args, $instance )
  {
    ob_start();
    ?>

    <div class="swiper-container logo-slider" id="clients-logo-slider">
      <div class="swiper-wrapper" id="client-logo-wrapper">
        <!-- Here I want to loop over the selected images to put them inside the slider ? -->
        <img class="swiper-slide" src="" alt="" width="100" id="client-logo"/>

      </div>
      <div class="swiper-scrollbar"></div>
    </div>

    <?php
    echo ob_get_clean();
  }

  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;
    // update widget code 
    return $instance;
  }

}

Here are the JS files I'm using to select an image from the media library and that is not working for a multiple selection and the inline code for the swiper setup. I will put the swiper setup inside a separate file and using the wp_localize_script to pass the user settings, but I'm thinking also to leave it inline.

// 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').first().toJSON();
        button.siblings('input').val(img.url).change();
        console.log(img);
      });

      file_frame.open();
    });
  });
}(jQuery));

// swiper setup
(function($){
  $(document).ready(function(){
    var swiperLogos = new Swiper('.logo-slider',{
      autoplay: {
      delay: 3000,
      },
      slidesPerView: 'auto',
      slidesPerColumnFill: 'row',
      scrollbar: {
        el: '.swiper-scrollbar',
        draggable: true,
      },
    });
  });
}(jQuery));

Answer 1

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="<?php echo $image; ?>" alt="" width="100" id="client-logo"/>
        <?php endforeach; ?>
      </div>
      <div class="swiper-scrollbar"></div>
    </div>
    <?php
    echo ob_get_clean();
  }