68 lines
2 KiB
HTML
68 lines
2 KiB
HTML
|
<div class="gallery is-flex is-flex-wrap-wrap">
|
||
|
{% for path in images %}
|
||
|
{% if section %}
|
||
|
{% set full_path = section.path ~ path %}
|
||
|
{% endif %}
|
||
|
{% if page %}
|
||
|
{% set full_path = page.path ~ path %}
|
||
|
{% endif %}
|
||
|
{% set thumb = resize_image(path=full_path, width=120, height=120) %}
|
||
|
|
||
|
<div class="gallery-item">
|
||
|
<a href="#{{ path }}">
|
||
|
<img src="{{ thumb.url }}" class="thumbnail" />
|
||
|
</a>
|
||
|
<div class="lightbox has-text-centered" id="{{ path }}">
|
||
|
{% if images | length > 1 %}
|
||
|
<span class="spacer"></span>
|
||
|
{% if loop.first %}
|
||
|
<a href="#{{ images | nth(n=images | length - 1) }}" class="lightbox-nav-previous">
|
||
|
⟳
|
||
|
</a>
|
||
|
{% else %}
|
||
|
<a href="#{{ images | nth(n=loop.index0 - 1) }}" class="lightbox-nav-previous">
|
||
|
<
|
||
|
</a>
|
||
|
{% endif %}
|
||
|
<img src="{{ path }}" />
|
||
|
<a class="delete is-large" href="#"></a>
|
||
|
{% if loop.last %}
|
||
|
<a href="#{{ images | nth(n=0) }}" class="lightbox-nav-next">
|
||
|
⟲
|
||
|
</a>
|
||
|
{% else %}
|
||
|
<a href="#{{ images | nth(n=loop.index) }}" class="lightbox-nav-next">
|
||
|
>
|
||
|
</a>
|
||
|
{% endif %}
|
||
|
{% else %}
|
||
|
<a href="#" class="close">
|
||
|
<span class="spacer"></span>
|
||
|
<img src="{{ path }}" />
|
||
|
</a>
|
||
|
{% endif %}
|
||
|
{% if images | length > 1 %}
|
||
|
{% if loop.first %}
|
||
|
<a href="#{{ images | nth(n=images | length - 1) }}" class="is-desktop">
|
||
|
<span class="lightbox-previous"></span>
|
||
|
</a>
|
||
|
{% else %}
|
||
|
<a href="#{{ images | nth(n=loop.index0 - 1) }}" class="is-desktop">
|
||
|
<span class="lightbox-previous"></span>
|
||
|
</a>
|
||
|
{% endif %}
|
||
|
{% if loop.last %}
|
||
|
<a href="#{{ images | nth(n=0) }}" class="is-desktop">
|
||
|
<span class="lightbox-next"></span>
|
||
|
</a>
|
||
|
{% else %}
|
||
|
<a href="#{{ images | nth(n=loop.index) }}" class="is-desktop">
|
||
|
<span class="lightbox-next"></span>
|
||
|
</a>
|
||
|
{% endif %}
|
||
|
{% endif %}
|
||
|
</div>
|
||
|
</div>
|
||
|
{% endfor %}
|
||
|
</div>
|