43 lines
2.3 KiB
HTML
43 lines
2.3 KiB
HTML
<div class="holder">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.min.css" integrity="sha512-vRbASHFS0JiM4xwX/iqr9mrD/pXGnOP2CLdmXSSNAjLdgQVFyt4qI+BIoUW7/81uSuKRj0cWv3Dov8vVQOTHLw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.min.js" integrity="sha512-lZD0JiwhtP4UkFD1mc96NiTZ14L7MjyX5Khk8PMxJszXMLvu7kjq1sp4bb0tcL6MY+/4sIuiUxubOqoueHrW4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<div class="breadcrumbs">
|
|
{% set breadcrumbs = currentPath.split('/') %}
|
|
{% for i in range(breadcrumbs|length) %}
|
|
{% if i+1 == breadcrumbs|length %}
|
|
<div class="current">{{ breadcrumbs[i] }}</div>
|
|
{% else %}
|
|
<a href="{{ '/' ~ '/'.join(breadcrumbs[:i+1]) }}"> 🗀 {{ breadcrumbs[i] }}</a>
|
|
<div class="seperator">/</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
<div class="content_holder">
|
|
<div class="albums">
|
|
{% for album in get_sibling_content_folders(currentPath) %}
|
|
<a href="/{{ album[1] }}">↪ 🗀 {{ album[0] }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="content">
|
|
{% for picture in get_folder_contents(currentPath) | sort(attribute='date_modified', reverse=True) %}
|
|
{% if 'image' in picture.categories %}
|
|
<a class="post photo" style="
|
|
max-width:{{picture.metadata.width//20}}px;
|
|
max-height:{{picture.metadata.height//20}}px;
|
|
width:calc({{picture.metadata.width//20}}px*250/{{picture.metadata.height//20}});
|
|
flex-grow:calc({{picture.metadata.width//20}}*250/{{picture.metadata.height//20}})">
|
|
<img src="/download/{{ picture.path }}" alt="{{ picture.name }}" class="pre-loaded"
|
|
onload="this.className+=' loaded'" data-zoom-image>
|
|
{{ picture.metadata.exif['DateTimeOriginal '] }}
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
<script>
|
|
const gallery = new Viewer(document.querySelector('.content'), {
|
|
inline: false,
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|