Update media gallery styling

package.json

@@ -104,5 +104,9 @@
   },
   "volta": {
     "node": "18.13.0"
+  },
+  "dependencies": {
+    "@splidejs/splide": "^4.1.4",
+    "fslightbox": "^3.4.1"
   }
 }

src/Frontend/Modules/MediaLibrary/Js/Slider.js

@@ -1,58 +1,58 @@
-/**
- * global: jsFrontend
- */
-(function ($) {
-  /**
-   * Create responsive media slider, which uses "slick" slider
-   */
-  $.fn.mediaLibrarySlider = function () {
-    // loop for all sliders
-    return this.each(function () {
-      // define slider
-      var $slider = $(this)
-
-      // define show controls or not
-      var showControls = $slider.data('show-controls')
-      var showPager = $slider.data('show-pager')
-
-      // we have multiple items
-      var multipleItems = ($slider.find('div').length > 1)
-
-      // we only have one item, hide controls
-      if (!multipleItems) {
-        showControls = false
-        showPager = false
-      }
-
-      // init slick slider
-      $slider.find('.widget-body').show().slick({
-        arrows: showControls,
-        autoplay: multipleItems,
-        adaptiveHeight: true,
-        dots: showPager,
-        // fade: true, // this has side effects in bootstrap 4 because of the .fade class, if you enable this don't forget to add extra styling for this
-        lazyLoad: 'ondemand',
-        mobileFirst: true
-      })
-    })
-  }
-})(jQuery)
-
-/**
- * MediaLibrary slider
- */
-jsFrontend.mediaLibrarySlider = {
-  init: function () {
-    var $sliders = $('.widget-media-library-slider')
-
-    // when no items for slider found, stop here
-    if ($sliders.length === 0) {
-      return false
-    }
-
-    // init sliders
-    $sliders.mediaLibrarySlider()
-  }
-}
-
-$(jsFrontend.mediaLibrarySlider.init)
+// /**
+//  * global: jsFrontend
+//  */
+// (function ($) {
+//   /**
+//    * Create responsive media slider, which uses "slick" slider
+//    */
+//   $.fn.mediaLibrarySlider = function () {
+//     // loop for all sliders
+//     return this.each(function () {
+//       // define slider
+//       var $slider = $(this)
+//
+//       // define show controls or not
+//       var showControls = $slider.data('show-controls')
+//       var showPager = $slider.data('show-pager')
+//
+//       // we have multiple items
+//       var multipleItems = ($slider.find('div').length > 1)
+//
+//       // we only have one item, hide controls
+//       if (!multipleItems) {
+//         showControls = false
+//         showPager = false
+//       }
+//
+//       // init slick slider
+//       $slider.find('.widget-body').show().slick({
+//         arrows: showControls,
+//         autoplay: multipleItems,
+//         adaptiveHeight: true,
+//         dots: showPager,
+//         // fade: true, // this has side effects in bootstrap 4 because of the .fade class, if you enable this don't forget to add extra styling for this
+//         lazyLoad: 'ondemand',
+//         mobileFirst: true
+//       })
+//     })
+//   }
+// })(jQuery)
+//
+// /**
+//  * MediaLibrary slider
+//  */
+// jsFrontend.mediaLibrarySlider = {
+//   init: function () {
+//     var $sliders = $('.widget-media-library-slider')
+//
+//     // when no items for slider found, stop here
+//     if ($sliders.length === 0) {
+//       return false
+//     }
+//
+//     // init sliders
+//     $sliders.mediaLibrarySlider()
+//   }
+// }
+//
+// $(jsFrontend.mediaLibrarySlider.init)

src/Frontend/Modules/MediaLibrary/Widgets/Slider.php

@@ -18,8 +18,6 @@ public function execute(): void
             return;
         }
 
-        $this->addJS('/js/vendors/slick.min.js', true, false);
-
         parent::execute();
         $this->loadTemplate();
         $this->parse();

src/Frontend/Themes/Bootstrap/Modules/MediaLibrary/Layout/Widgets/Lightbox.html.twig

@@ -0,0 +1,35 @@
+{% if mediaItems %}
+  <section class="module-media-library" itemscope itemtype="http://schema.org/ImageGallery">
+    {% block widget_heading %}
+      {#    {% if title %}#}
+      {#      <header class="widget-heading">#}
+      {#        <h3>{{ title|ucfirst }}</h3>#}
+      {#      </header>#}
+      {#    {% endif %}#}
+    {% endblock %}
+    {% block widget_body %}
+      <div class="widget-body">
+        <div class="grid-container grid-masonry">
+          {% for mediaItem in mediaItems %}
+            <div class="grid-item">
+              <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+                {% set img = mediaItem.webpath() %}
+                <a href="{{ (mediaItem.getWebPath()) | imagine_filter('media_library_lightbox_large') }}" itemprop="contentUrl" data-size="{{ mediaItem.width }}x{{ mediaItem.height }}" data-fslightbox="gallery-lightbox" data-caption="{{ mediaItem.title }}">
+                  <img itemprop="thumbnail" src="{{ (mediaItem.getWebPath()) | imagine_filter('media_library_lightbox_small') }}" alt="{{ mediaItem.title }}" />
+                </a>
+                {#              <figcaption itemprop="caption description">{% if title %}{{ title }}{% endif %}{% if not title %}{{ mediaItem.title }}{% endif %}</figcaption>#}
+                {% if mediaItem.type == 'movie' %}
+                  <div class="hidden" data-lightbox="html">
+                    {{ mediaItem.getIncludeHTML()|raw }}
+                  </div>
+                {% endif %}
+              </figure>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    {% endblock %}
+
+    {% block widget_footer %}{% endblock %}
+  </section>
+{% endif %}

src/Frontend/Themes/Bootstrap/Modules/MediaLibrary/Layout/Widgets/Listing.html.twig

@@ -0,0 +1,30 @@
+{#
+  Media Listing
+  Variables that are available:
+  - {{ mediaItems }}: Contains full urls to MediaItem items, f.e.: {{ items.source }}
+  - {{ title }}: A custom optional title that you can give when parsing from Custom module.
+#}
+
+{% if mediaItems %}
+<section class="module-media-library widget-media-library-listing">
+  {% block widget_heading %}
+    {% if title %}
+      <header class="widget-heading">
+        <h3>{{ title|ucfirst }}</h3>
+      </header>
+    {% endif %}
+  {% endblock %}
+
+  {% block widget_body %}
+    <div class="widget-body">
+      <ul>
+        {% for mediaItem in mediaItems %}
+          <li>{{ mediaItem.getLinkHTML|raw }}</li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endblock %}
+
+  {% block widget_footer %}{% endblock %}
+</section>
+{% endif %}

src/Frontend/Themes/Bootstrap/Modules/MediaLibrary/Layout/Widgets/OneImage.html.twig

@@ -0,0 +1,32 @@
+{#
+  Media Slider with BxSlider
+  Variables that are available:
+  - {{ mediaItem }}: Contains the MediaItem
+  - {{ title }}: A custom optional title that you can give when parsing from Custom module.
+#}
+
+{% if mediaItem %}
+  <section class="module-media-library widget-media-library-one-image" itemscope itemtype="http://schema.org/ImageGallery">
+    {% block widget_heading %}
+      {% if title %}
+        <header class="widget-heading">
+          <h3>{{ title|ucfirst }}</h3>
+        </header>
+      {% endif %}
+    {% endblock %}
+
+    {% block widget_body %}
+      <div class="widget-body">
+        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+          {% if mediaItem.type == 'movie' %}
+            {{ mediaItem.getIncludeHTML()|raw }}
+          {% else %}
+            <img itemprop="thumbnail" class="img-polaroid img-responsive" src="{{ (mediaItem.getWebPath('media_library_one_image_large')) }}" alt="{{ mediaItem.title }}" />
+          {% endif %}
+        </figure>
+      </div>
+    {% endblock %}
+
+    {% block widget_footer %}{% endblock %}
+  </section>
+{% endif %}

src/Frontend/Themes/Bootstrap/Modules/MediaLibrary/Layout/Widgets/OneRandomImage.html.twig

@@ -0,0 +1,32 @@
+{#
+  Media Slider with BxSlider
+  Variables that are available:
+  - {{ mediaItem }}: Contains the MediaItem
+  - {{ title }}: A custom optional title that you can give when parsing from Custom module.
+#}
+
+{% if mediaItem %}
+  <section class="module-media-library widget-media-library-one-random-image" itemscope itemtype="http://schema.org/ImageGallery">
+    {% block widget_heading %}
+      {% if title %}
+        <header class="widget-heading">
+          <h3>{{ title|ucfirst }}</h3>
+        </header>
+      {% endif %}
+    {% endblock %}
+
+    {% block widget_body %}
+      <div class="widget-body">
+        <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+          {% if mediaItem.type == 'movie' %}
+            {{ mediaItem.getIncludeHTML()|raw }}
+          {% else %}
+            <img itemprop="thumbnail" class="img-polaroid img-responsive" src="{{ (mediaItem.getWebPath('media_library_one_image_large')) }}" itemprop="thumbnail" alt="{{ mediaItem.title }}" />
+          {% endif %}
+        </figure>
+      </div>
+    {% endblock %}
+
+    {% block widget_footer %}{% endblock %}
+  </section>
+{% endif %}

src/Frontend/Themes/Bootstrap/Modules/MediaLibrary/Layout/Widgets/Slider.html.twig

@@ -0,0 +1,42 @@
+{#
+  Media Slider with BxSlider
+  Variables that are available:
+  - {{ mediaItems }}: Contains the MediaItem items
+  - {{ title }}: A custom optional title that you can give when parsing from Custom module.
+#}
+
+{% if mediaItems %}
+<section class="module-media-library widget-media-library-slider" data-show-controls="true" data-show-pager="true" itemscope itemtype="http://schema.org/ImageGallery">
+  {% block widget_heading %}
+    {% if title %}
+      <header class="widget-heading">
+        <h3>{{ title|ucfirst }}</h3>
+      </header>
+    {% endif %}
+  {% endblock %}
+
+  {% block widget_body %}
+    <div class="widget-body splide" data-role="slider">
+      <div class="splide__track">
+        <ul class="splide__list">
+          {% for mediaItem in mediaItems %}
+            <li class="splide__slide">
+              <div itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+                {% if mediaItem.type == 'movie' %}
+                  {{ mediaItem.getIncludeHTML()|raw }}
+                {% else %}
+                  <a href="{{ (mediaItem.getWebPath()) | imagine_filter('media_library_lightbox_large') }}" itemprop="contentUrl" data-size="{{ mediaItem.width }}x{{ mediaItem.height }}" data-fslightbox="{{ title }}-slider-lightbox" data-caption="{{ mediaItem.title }}">
+                    <img itemprop="thumbnail" src="{{ (mediaItem.getWebPath()) | imagine_filter('media_library_lightbox_small') }}" alt="{{ mediaItem.title }}" />
+                  </a>
+                {% endif %}
+              </div>
+            </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </div>
+  {% endblock %}
+
+  {% block widget_footer %}{% endblock %}
+</section>
+{% endif %}

src/Frontend/Themes/Bootstrap/src/Js/Index.js

@@ -9,14 +9,17 @@ import { Resize } from './Utilities/Resize'
 // /* Theme imports */
 // /* eg. import tooltip from './Theme/Tooltip' */
 import { Pagination } from './Theme/Pagination'
+import { Slider } from './Theme/Slider'
 import NavbarToggler from './Theme/NavbarToggler'
+import * as fslightbox from 'fslightbox/index'
 
 /* Renders */
 window.bootstrap = bootstrap
 window.scrollto = new ScrollTo()
 window.resizeFunction = new Resize()
 window.pagination = new Pagination()
 window.navbarToggler = new NavbarToggler()
+window.slider = new Slider()
 
 window.resizeFunction.resize()
 window.pagination.events()