Adds gallery to functions page

_includes/block/hero.html

@@ -26,6 +26,35 @@
         {% if include.image %}
         <img class="object-cover object-center rounded" alt="hero" src="{{ include.image }}">
         {% endif %}
+        {% if include.gallery %}
+        <section id='image-carousel' class='splide'>
+          <div class='splide__track'>
+              <ul class='splide__list' style='list-style-type: none; list-style: none;'>
+              {% for image in site.static_files %}
+                  {% if image.path contains include.gallery %}
+                  <li class='splide__slide'>
+                      <img src="{{ image.path | relative_url }}" alt="" />
+                  </li>
+                  {% endif %}
+              {% endfor %}
+              </ul>
+          </div>
+      </section>
+      {% endif %}
       </div>
     </div>
-</section>
+</section>
+
+{% if include.gallery %}
+<script>
+  document.addEventListener( 'DOMContentLoaded', function () {
+      new Splide('#image-carousel', {
+          type: 'loop',
+          perPage: 1,
+          autoPlay: true,
+          pagination: false,
+      }).mount();
+  });
+  </script>
+  
+{% endif %}

functions.md

@@ -3,8 +3,7 @@ layout: default
 permalink: /functions
 ---
 
-{% include block/hero.html title='A wealth of functions' title_2='is provided' image='https://dummyimage.com/860x600' color='by default with InvenTree' detail='By default InvenTree ships with a lot of functions in the area of part, inventory, supplier, manufacturer, machine and BOM managment.
-It also enables reports, is extendible and can be extended with plugins.' %}
+{% include block/hero.html title='A wealth of functions' title_2='provided' gallery='webgallery/' color='out of the box' detail='InvenTree ships with a wide range of functions for managing parts, inventory, supplier and manufacturer data, machine and BOM managment <em>and so much more</em>!<br>It also enables reports, can be integrated with external applications and can be extended with plugins.' %}
 
 {% include block/functions.html data=site.data.functions.general extend=true no_link=true padding=false %}
 {% include block/functions.html data=site.data.functions.extras extend=true padding=false %}