140 lines
5.0 KiB
Plaintext
140 lines
5.0 KiB
Plaintext
{% set title = album.name %}
|
|
{% extends "_layout.njk" %}
|
|
|
|
{% set fileRoot = config.domain %}
|
|
{% set generateZips = config.uploads.generateZips %}
|
|
{% set usingCdn = config.cloudflare and config.cloudflare.purgeCache %}
|
|
|
|
{% block stylesheets %}
|
|
<!-- Stylesheets -->
|
|
<link rel="stylesheet" href="../libs/bulma/bulma.min.css?v={{ globals.v3 }}">
|
|
<link rel="stylesheet" href="../css/style.css?v={{ globals.v1 }}">
|
|
<link rel="stylesheet" href="../css/thumbs.css?v={{ globals.v1 }}">
|
|
<link rel="stylesheet" href="../css/album.css?v={{ globals.v1 }}">
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{% if not nojs -%}
|
|
<!-- Scripts -->
|
|
<script src="../libs/lazyload/lazyload.min.js?v={{ globals.v3 }}"></script>
|
|
<script src="../js/album.js?v={{ globals.v1 }}"></script>
|
|
<script src="../js/misc/utils.js?v={{ globals.v1 }}"></script>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block opengraph %}
|
|
<!-- Open Graph tags -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:title" content="{{ album.name | safe }} – {{ files.length }} files" />
|
|
<meta property="og:url" content="{{ root }}/{{ album.url }}" />
|
|
<meta property="og:description" content="{{ album.description }}" />
|
|
<meta property="og:image" content="{{ fileRoot }}/{{ album.thumb }}" />
|
|
<meta property="og:locale" content="en_US" />
|
|
|
|
<!-- Twitter Card tags -->
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:title" content="{{ album.name | safe }} – {{ files.length }} files">
|
|
<meta name="twitter:description" content="{{ album.description }}">
|
|
<meta name="twitter:image" content="{{ fileRoot }}/{{ album.thumb }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{{ super() }}
|
|
<section class="section">
|
|
<div class="container">
|
|
<nav class="level">
|
|
<div class="level-left">
|
|
<div class="level-item">
|
|
<h1 id="title" class="title">
|
|
{{ album.name | safe }}
|
|
</h1>
|
|
</div>
|
|
<div class="level-item">
|
|
<h1 id="count" class="subtitle">
|
|
{{ files.length }} files (<span class="file-size">{{ album.totalSize }} B</span>)
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
{% if generateZips -%}
|
|
<div class="level-right">
|
|
<p class="level-item">
|
|
{% 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 -%}
|
|
{%- else -%}
|
|
<a class="button is-primary is-outlined" title="The album's owner has chosen to disable download" disabled>Download disabled</a>
|
|
{%- endif %}
|
|
</p>
|
|
</div>
|
|
{%- endif %}
|
|
</nav>
|
|
|
|
{% if album.description -%}
|
|
<h2 class="subtitle description">
|
|
{{ album.description | safe }}
|
|
</h2>
|
|
{%- endif %}
|
|
<hr>
|
|
|
|
{% 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>
|
|
<p>Please <a href="../{{ album.url }}">click here</a> if you want to view its regular version.</p>
|
|
</div>
|
|
</article>
|
|
{%- endif %}
|
|
|
|
{% if files.length -%}
|
|
<div id="table" class="columns is-multiline is-mobile is-centered has-text-centered">
|
|
{% for file in files %}
|
|
<div class="image-container column">
|
|
<a class="image" href="{{ fileRoot }}/{{ file.name }}" target="_blank" rel="noopener">
|
|
{% if file.thumb -%}
|
|
{% if nojs -%}
|
|
<img alt="{{ file.name }}" src="{{ fileRoot }}/{{ file.thumb }}" width="200" height="200" loading="lazy">
|
|
{%- else -%}
|
|
<img alt="{{ file.name }}" data-src="{{ fileRoot }}/{{ file.thumb }}">
|
|
{%- endif %}
|
|
{%- else -%}
|
|
<h1 class="title">{{ file.extname | default('N/A') }}</h1>
|
|
{%- endif %}
|
|
</a>
|
|
<div class="details">
|
|
<p><span class="name">{{ file.name }}</span></p>
|
|
<p class="file-size">{{ file.size }} B</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{%- else -%}
|
|
<article class="message">
|
|
<div class="message-body">
|
|
There are no files in the album.
|
|
</div>
|
|
</article>
|
|
{%- endif %}
|
|
</div>
|
|
</section>
|
|
|
|
{% if not nojs -%}
|
|
<noscript>
|
|
<style>body > section:not(#noscript) { display: none !important; }</style>
|
|
<section id="noscript" class="hero is-fullheight">
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
<p>You have JavaScript disabled, but this page requires JavaScript to function.</p>
|
|
<p>Please <a href="../{{ album.url }}?nojs">click here</a> if you want to view its No-JS version.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</noscript>
|
|
{%- endif %}
|
|
{% endblock %}
|