add: gallery

fix: blog

templates/pictures.html.twig

@@ -0,0 +1,68 @@
+{% extends 'partials/base.html.twig' %}
+{% set blog = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
+{% set show_breadcrumbs = header_var('show_breadcrumbs', [page, blog])|defined(true) %}
+
+{% block stylesheets %}
+    {% do assets.addCss('theme://css/photoswipe.css') %}
+    {% do assets.addCss('theme://css/default-skin/default-skin.css') %}
+    {{ parent() }}
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    {% do assets.addJs('theme://js/photoswipe.min.js') %}
+    {% do assets.addJs('theme://js/photoswipe-ui-default.min.js') %}
+{% endblock %}
+
+{% set image_counter = 0 %}
+
+{% block content %}
+    {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
+        {% include 'partials/breadcrumbs.html.twig' %}
+    {% endif %}
+    <hr class="mb-4 mt-1">
+
+    {{ page.content }}
+    <div class="card-columns">
+        {% for media_item in page.media.videos %}
+            <div class="card">
+                {{ media_item.html }}
+            </div>
+        {% endfor %}
+    </div>
+    <div class="card-columns">
+        {% for media_item in page.media.images %}
+            <div class="card" onclick="show_photoswipe({{ loop.index - 1 }})">
+                {{ media_item.html }}
+            </div>
+        {% endfor %}
+    </div>
+
+    {{ dump (image_counter) }}
+
+    {% include 'partials/photoswipe.html.twig' %}
+
+    <script>
+        let pswpElement = document.querySelectorAll('.pswp')[0];
+
+        let items = [
+            {% for media_item in page.media.images %}
+                {
+                    src: '{{ media_item.url }}',
+                    w: {{ media_item.width }},
+                    h: {{ media_item.height }}
+                },
+            {% endfor %}
+        ];
+
+        function show_photoswipe(start_index)
+        {
+            let options = {
+                index: start_index
+            };
+
+            let gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
+            gallery.init();
+        }
+    </script>
+{% endblock %}