Advanced image viewers (#2132)

Image slider with [Swiper](https://swiperjs.com/).


![image](https://github.com/alshedivat/al-folio/assets/31376482/9068823c-571a-4d31-8e95-755a40a15ec9)

Image comparison slider with
[img-comparison-slider](https://img-comparison-slider.sneas.io/).


![image](https://github.com/alshedivat/al-folio/assets/31376482/97812477-c13b-43b1-8f0b-cb098462de3c)

---------

Signed-off-by: George Araújo <george.gcac@gmail.com>

_config.yml

@@ -394,8 +394,8 @@ mdb:
     css: "sha256-jpjYvU3G3N6nrrBwXJoVEYI/0zw8htfFnhT9ljN3JJw="
     js: "sha256-NdbiivsvWt7VYCt6hYNT3h/th9vSTL4EDWeGs5SN3DA="
 medium_zoom:
-  version: "1.0.8"
+  version: "1.1.0"
-  integrity: "sha256-7PhEpEWEW0XXQ0k6kQrPKwuoIomz8R8IYyuU1Qew4P8="
+  integrity: "sha256-ZgMyDAIYDYGxbcpJcfUnYwNevG/xi9OHKaR/8GK+jWc="
 
 # -----------------------------------------------------------------------------
 # Get external JSON data

_includes/figure.liquid

@@ -1,6 +1,10 @@
 {% assign img_path = include.path | remove: '.jpg' | remove: '.jpeg' | remove: '.png' | remove: '.tiff' | remove: '.gif' %}
 
-<figure>
+<figure
+  {% if include.slot %}
+    slot="{{ include.slot }}"
+  {% endif %}
+>
   <picture>
     <!-- Auto scaling with imagemagick -->
     <!--

_includes/head.liquid

@@ -71,3 +71,18 @@
     crossorigin=""
   >
 {% endif %}
+
+<!-- Image comparison slider -->
+{% if page.images %}
+  {% if page.images.compare %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8.0/dist/styles.min.css">
+  {% endif %}
+  {% if page.images.slider %}
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css"
+      integrity="sha256-yUoNxsvX+Vo8Trj3lZ/Y5ZBf8HlBFsB6Xwm7rH75/9E="
+      crossorigin="anonymous"
+    >
+  {% endif %}
+{% endif %}

_includes/scripts/imageLayouts.liquid

@@ -0,0 +1,12 @@
+{% if page.images %}
+  {% if page.images.compare %}
+    <script src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8.0/dist/index.min.js"></script>
+  {% endif %}
+  {% if page.images.slider %}
+    <script
+      src="https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-element-bundle.min.js"
+      integrity="sha256-BPrwikijIybg9OQC5SYFFqhBjERYOn97tCureFgYH1E="
+      crossorigin="anonymous"
+    ></script>
+  {% endif %}
+{% endif %}

_layouts/default.liquid

@@ -58,5 +58,6 @@
     {% include scripts/analytics.liquid %}
     {% include scripts/progressBar.liquid %}
     {% include scripts/wechatModal.liquid %}
+    {% include scripts/imageLayouts.liquid %}
   </body>
 </html>

_posts/2024-01-27-advanced-images.md

@@ -0,0 +1,35 @@
+---
+layout: post
+title: a post with advanced image components
+date: 2024-01-27 11:46:00
+description: this is what advanced image components could look like
+tags: formatting images
+categories: sample-posts
+thumbnail: assets/img/9.jpg
+images:
+  compare: true
+  slider: true
+---
+
+This is an example post with advanced image components.
+
+## Image Slider
+
+This is a simple image slider. It uses the [Swiper](https://swiperjs.com/) library. Check the [examples page](https://swiperjs.com/demos) for more information of what you can achieve with it.
+
+<swiper-container keyboard="true" navigation="true" pagination="true" pagination-clickable="true" pagination-dynamic-bullets="true" rewind="true">
+  <swiper-slide>{% include figure.liquid path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid path="assets/img/8.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid path="assets/img/10.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid path="assets/img/12.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+</swiper-container>
+
+## Image Comparison Slider
+
+This is a simple image comparison slider. It uses the [img-comparison-slider](https://img-comparison-slider.sneas.io/) library. Check the [examples page](https://img-comparison-slider.sneas.io/examples.html) for more information of what you can achieve with it.
+
+<img-comparison-slider>
+  {% include figure.liquid path="assets/img/prof_pic.jpg" class="img-fluid rounded z-depth-1" slot="first" %}
+  {% include figure.liquid path="assets/img/prof_pic_color.png" class="img-fluid rounded z-depth-1" slot="second" %}
+</img-comparison-slider>

_sass/_base.scss

@@ -1091,3 +1091,9 @@ nav[data-toggle="toc"] {
   height: 400px;
   width: 100%;
 }
+
+swiper-container {
+  --swiper-navigation-color: var(--global-theme-color);
+  --swiper-pagination-color: var(--global-theme-color);
+  --swiper-pagination-bullet-inactive-color: var(--global-text-color);
+}