70 lines
2 KiB
Twig
70 lines
2 KiB
Twig
{% 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 %}
|