{% 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) %} {% 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, history: false, }; let gallery = new PhotoSwipe( pswpElement, PhotoSwipeDefaultUI, items, options); gallery.init(); } </script> {% endblock %}