Simpler gallery

- use splide.js
- iterate though a directory automatically

_includes/app_carousel.html

@@ -1,61 +0,0 @@
-{% with image_count=14 %}
-{% include "carousel_start.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_1.jpg", alt="App screenshot", active=True%}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_2.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_3.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_4.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_5.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_6.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_7.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_8.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_9.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_10.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_11.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_12.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_13.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_14.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% include "carousel_end.html" %}

_includes/carousel.html

@@ -0,0 +1,27 @@
+<div class='splide'>
+    <div class='splide__track'>
+        <ul class='splide__list'>
+            {% for img in listimages(directory) %}
+            {% with src=img %}
+            {% include "splide_image.html" %}
+            {% endwith %}
+            {% endfor %}
+        </ul>
+    </div>
+</div>
+
+<script>
+	document.addEventListener( 'DOMContentLoaded', function () {
+		new Splide(
+            '.splide', {
+                type: 'loop',
+                perPage: 2,
+                autoplay: true,
+                pagination: false,
+                // cover: true,
+                height: '25rem',
+                focus: 'center',
+            }
+        ).mount();
+	} );
+</script>

_includes/carousel_end.html

@@ -1,14 +0,0 @@
-
-    </div>
-
-    <!-- Left and right controls -->
-      <a class="left carousel-control" href="#image-carousel" data-slide="prev">
-        <span class="fas fa-chevron-left"></span>
-        <span class="sr-only">Previous</span>
-      </a>
-      <a class="right carousel-control" href="#image-carousel" data-slide="next">
-        <span class="fas fa-chevron-right"></span>
-        <span class="sr-only">Next</span>
-      </a>
-    </div>
-  </div>

_includes/carousel_start.html

@@ -1,14 +0,0 @@
-<div class="container carousel-container">
-    <div id="image-carousel" class="carousel slide" data-ride="carousel">
-
-      <!-- Indicators -->
-      <ol class="carousel-indicators">
-
-        {% for idx in range(image_count) %}
-        <li data-target="#image-carousel" data-slide-to="{{ idx }}" {% if idx == 0 %}class="active"{% endif %}></li>
-        {% endfor %}
-      </ol>
-  
-      <!-- Wrapper for slides -->
-      <div class="carousel-inner">
-  

_includes/index_carousel.html

@@ -1,49 +0,0 @@
-{% with image_count=11 %}
-{% include "carousel_start.html" %}
-{% endwith %}
-
-{% with src="index/part_category.png", min_height="400px", max_height="400px", alt="Part Categories", active=True %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/part_stock.png", min_height="400px", max_height="400px", alt="Part Stock" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/part_suppliers.png", min_height="400px", max_height="400px", alt="Part Suppliers" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/stock_item.png", min_height="400px", max_height="400px", alt="Stock Item" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/stock_location.png", min_height="400px", max_height="400px", alt="Stock Location" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/stock_location_2.png", min_height="400px", max_height="400px", alt="Stock Location" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/suppliers.png", min_height="400px", max_height="400px", alt="Suppliers" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/part_admin.png", min_height="400px", max_height="400px", alt="Admin Interface" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/category_params.png", min_height="400px", max_height="400px", alt="Part Parameters" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/build_outputs.png", min_height="400px", max_height="400px", alt="Build Orders" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/bom_add_item.png", min_height="400px", max_height="400px", alt="Bill of Materials" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% include "carousel_end.html" %}

_includes/splide_image.html

@@ -10,6 +10,6 @@
 {% set img_url = assets  + '/images/' + src %}
 {% endif %}
 
-<div class='item{% if active %} active{% endif %}'>
-    <img class='center' src='{{ img_url }}' alt='{{ alt }}' style='{% if min_height %}min-height: {{ min_height }}; {% endif %}{% if max_height %}max-height: {{ max_height }}; {% endif %}'>
-</div>
+<li class='splide__slide'>
+    <img src='{{ img_url }}'>
+</li>

docs/app/app.md

@@ -2,7 +2,9 @@
 title: InvenTree Mobile App
 ---
 
-{% include "app_carousel.html" %}
+{% with directory="appgallery" %}
+{% include "carousel.html" %}
+{% endwith %}
 
 -----
 

docs/index.md

@@ -12,6 +12,8 @@ hide:
 
 --------------
 
-{% include "index_carousel.html" %}
+{% with directory="indexgallery" %}
+{% include "carousel.html" %}
+{% endwith %}
 
 --------------

main.py

@@ -0,0 +1,28 @@
+import os
+from posixpath import dirname
+
+def define_env(env):
+
+    @env.macro
+    def listimages(subdir):
+        """
+        Return a listing of all asset files in the provided subdir
+        """
+
+        here = os.path.dirname(__file__)
+
+        directory = os.path.join(here, 'docs', 'assets', 'images', subdir)
+
+        assets = []
+
+        allowed = [
+            '.png',
+            '.jpg',
+        ]
+
+        for asset in os.listdir(directory):
+
+            if any([asset.endswith(x) for x in allowed]):
+                assets.append(os.path.join(subdir, asset))
+
+        return assets

mkdocs.yml

@@ -29,6 +29,7 @@ extra_css:
   - stylesheets/regular.css
   - stylesheets/solid.css
   - stylesheets/bootstrap.css
+  - https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css
 extra_javascript:
   - javascripts/extra.js
   - javascripts/fontawesome.js
@@ -37,6 +38,7 @@ extra_javascript:
   - javascripts/solid.js
   - https://code.jquery.com/jquery-3.6.0.js
   - https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js
+  - https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js
 
 # Navigation
 nav:
@@ -156,4 +158,4 @@ extra:
       name: InvenTree on Docker
 
 use_directory_urls: true
-strict: true
+strict: false