2019-09-19 01:27:19 +00:00
{% set metaTitle %}
{{- album.name | truncate(60, true, '…') + ' – ' + files.length + ' file' + ('s' if files.length !== 1) -}}
{% endset %}
2019-09-19 08:30:00 +00:00
{% set metaDesc = album.description | striptags | truncate(200, true, '…') %}
2019-09-19 01:27:19 +00:00
{% set metaUrl = '/' + album.url %}
2018-04-18 21:00:36 +00:00
2019-09-17 04:13:41 +00:00
{% set fileRoot = config.domain %}
2019-09-19 01:27:19 +00:00
{% set metaImage = fileRoot + '/' + album.thumb %}
{% extends "_layout.njk" %}
2019-09-17 04:13:41 +00:00
{% set generateZips = config.uploads.generateZips %}
{% set usingCdn = config.cloudflare and config.cloudflare.purgeCache %}
2018-04-18 21:00:36 +00:00
{% block stylesheets %}
<!-- Stylesheets -->
2019-09-19 12:10:37 +00:00
<link rel="stylesheet" href="../libs/bulma/bulma.min.css{{ versions[3] }}">
<link rel="stylesheet" href="../css/style.css{{ versions[1] }}">
<link rel="stylesheet" href="../css/thumbs.css{{ versions[1] }}">
<link rel="stylesheet" href="../css/album.css{{ versions[1] }}">
2018-04-18 21:00:36 +00:00
{% endblock %}
2018-04-29 12:47:24 +00:00
{% block scripts %}
2019-09-01 19:23:16 +00:00
{% if not nojs -%}
2018-08-20 23:24:50 +00:00
<!-- Scripts -->
2019-09-19 12:10:37 +00:00
<script src="../libs/lazyload/lazyload.min.js{{ versions[3] }}"></script>
<script src="../js/album.js{{ versions[1] }}"></script>
<script src="../js/misc/utils.js{{ versions[1] }}"></script>
2019-09-01 19:23:16 +00:00
{% endif %}
2018-04-29 12:47:24 +00:00
{% endblock %}
2020-04-23 18:18:25 +00:00
{% block endmeta %}
{% if not nojs -%}
<noscript>
<style>body > section:not(#noscript) { display: none !important; }</style>
<!-- Redirect after 3 seconds -->
<meta http-equiv="refresh" content="3;url=../{{ album.url }}?nojs">
</noscript>
{%- endif %}
{% endblock %}
2018-04-18 21:00:36 +00:00
{% block content %}
{{ super() }}
<section class="section">
<div class="container">
2018-04-26 21:04:21 +00:00
<nav class="level">
<div class="level-left">
<div class="level-item">
<h1 id="title" class="title">
2019-09-19 01:27:19 +00:00
{{ album.name | truncate(70, true, '…') }}
2018-04-26 21:04:21 +00:00
</h1>
</div>
<div class="level-item">
<h1 id="count" class="subtitle">
2019-09-19 01:30:02 +00:00
{{ files.length }} file{{ 's' if files.length !== 1 }} (<span class="file-size">{{ album.totalSize }} B</span>)
2018-04-26 21:04:21 +00:00
</h1>
</div>
</div>
2019-09-17 04:13:41 +00:00
{% if generateZips -%}
2018-04-26 21:04:21 +00:00
<div class="level-right">
<p class="level-item">
2019-09-17 04:13:41 +00:00
{% if not files.length -%}
<a class="button is-primary is-outlined" title="There are no files in the album" disabled>Download album</a>
{%- elif album.downloadLink -%}
{%- if usingCDN -%}
<a class="button is-primary is-outlined" title="Be aware that album archive may be cached by CDN" href="../{{ album.downloadLink }}">Download album</a>
{%- else -%}
<a class="button is-primary is-outlined" href="../{{ album.downloadLink }}">Download album</a>
{%- endif -%}
2018-04-28 17:26:39 +00:00
{%- else -%}
2018-04-29 13:17:02 +00:00
<a class="button is-primary is-outlined" title="The album's owner has chosen to disable download" disabled>Download disabled</a>
2018-04-28 17:26:39 +00:00
{%- endif %}
2018-04-26 21:04:21 +00:00
</p>
</div>
{%- endif %}
</nav>
2019-09-01 19:23:16 +00:00
2019-09-17 04:13:41 +00:00
{% if album.description -%}
2019-09-19 08:30:00 +00:00
<div class="subtitle description">
{{ album.description | nl2br | safe }}
</div>
2018-04-26 21:04:21 +00:00
{%- endif %}
2018-04-18 21:00:36 +00:00
<hr>
2019-09-01 19:23:16 +00:00
{% if nojs -%}
<article class="message">
<div class="message-body">
<p>You are viewing No-JS version of this album, so file size will be displayed in bytes.</p>
2019-09-17 04:13:41 +00:00
<p>Please <a href="../{{ album.url }}">click here</a> if you want to view its regular version.</p>
2019-09-01 19:23:16 +00:00
</div>
</article>
{%- endif %}
2018-04-26 21:04:21 +00:00
{% if files.length -%}
2018-04-26 18:33:11 +00:00
<div id="table" class="columns is-multiline is-mobile is-centered has-text-centered">
{% for file in files %}
2019-09-17 04:13:41 +00:00
<div class="image-container column">
2020-04-06 18:50:15 +00:00
<a class="image" href="{{ fileRoot }}/{{ file.name }}" target="_blank">
2018-04-29 12:47:24 +00:00
{% if file.thumb -%}
2019-09-01 19:23:16 +00:00
{% if nojs -%}
2019-09-17 04:13:41 +00:00
<img alt="{{ file.name }}" src="{{ fileRoot }}/{{ file.thumb }}" width="200" height="200" loading="lazy">
2019-09-01 19:23:16 +00:00
{%- else -%}
2019-09-17 04:13:41 +00:00
<img alt="{{ file.name }}" data-src="{{ fileRoot }}/{{ file.thumb }}">
2019-09-01 19:23:16 +00:00
{%- endif %}
2018-04-29 12:47:24 +00:00
{%- else -%}
<h1 class="title">{{ file.extname | default('N/A') }}</h1>
{%- endif %}
</a>
2018-04-26 18:33:11 +00:00
<div class="details">
2019-09-17 04:13:41 +00:00
<p><span class="name">{{ file.name }}</span></p>
2019-04-19 04:56:57 +00:00
<p class="file-size">{{ file.size }} B</p>
2018-04-26 18:33:11 +00:00
</div>
2018-04-18 21:00:36 +00:00
</div>
{% endfor %}
</div>
2018-04-26 21:04:21 +00:00
{%- else -%}
<article class="message">
<div class="message-body">
2018-04-27 03:03:13 +00:00
There are no files in the album.
2018-04-26 21:04:21 +00:00
</div>
</article>
{%- endif %}
2018-04-18 21:00:36 +00:00
</div>
</section>
2018-04-29 12:47:24 +00:00
2019-09-01 19:23:16 +00:00
{% if not nojs -%}
2018-04-29 12:47:24 +00:00
<noscript>
2019-09-01 19:23:16 +00:00
<section id="noscript" class="hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
2020-04-23 18:18:25 +00:00
<p>This page requires JavaScript to function.</p>
<p>If you are not redirected to its No-JS version, please <a href="../{{ album.url }}?nojs">click here</a>.</p>
2019-09-01 19:23:16 +00:00
</div>
</div>
</section>
2018-04-29 12:47:24 +00:00
</noscript>
2019-09-01 19:23:16 +00:00
{%- endif %}
2018-04-18 21:00:36 +00:00
{% endblock %}