42 lines
3.2 KiB
Twig
42 lines
3.2 KiB
Twig
{% extends 'admin/shell.html.twig' %}
|
|
{% set nav = 'media' %}
|
|
{% block title %}Mediathek{% endblock %}
|
|
{% block scripts %}<script type="module" src="/assets/media-drop.js?v={{ kant_version() }}"></script><script type="module" src="/assets/live-search.js?v={{ kant_version() }}"></script>{% endblock %}
|
|
{% block heading %}Mediathek{% endblock %}
|
|
{% block lead %}Alle Bilder, neueste zuerst. Beim Hochladen wird jedes Bild in WebP umgewandelt und in mehreren Breiten abgelegt; die Seite liefert dann die passende aus.{% endblock %}
|
|
{% block content %}
|
|
|
|
{% if is_granted('ROLE_EDITOR') %}
|
|
<form action="{{ path('admin_media_upload') }}" method="post" enctype="multipart/form-data" class="card card-body">
|
|
<input type="hidden" name="_csrf_token" value="{{ csrf_token('media-form') }}">
|
|
<input type="hidden" name="seite" value="{{ library.page }}"><input type="hidden" name="q" value="{{ query }}">
|
|
<input type="hidden" name="archiv" value="{{ archived ? '1' : '' }}">
|
|
{# A drop area rather than the browser's file widget. The input stays a real file input and
|
|
stays focusable, so the form works by keyboard and without JavaScript; the script only adds
|
|
dragging and the list of chosen files. No "required": the input is visually hidden, and a
|
|
browser cannot show its validation bubble on something invisible. The server refuses an
|
|
empty upload with a readable message instead. #}
|
|
<div class="dropzone" data-dropzone>
|
|
<label class="dropzone-label" for="files">
|
|
<span class="dropzone-icon" aria-hidden="true">▩</span>
|
|
<strong>Bilder hierher ziehen</strong>
|
|
<span class="dropzone-hint">oder klicken, um Dateien zu wählen</span>
|
|
</label>
|
|
<input id="files" name="files[]" type="file" accept="image/jpeg,image/png,image/webp" multiple class="dropzone-input">
|
|
</div>
|
|
<p class="dropzone-chosen" data-chosen role="status">Noch keine Datei gewählt.</p>
|
|
<p class="field-help">JPEG, PNG oder WebP, höchstens 8 MB je Bild. Mehrere Dateien sind möglich; das Hosting kann ein kleineres Limit setzen.</p>
|
|
<button class="primary" type="submit">Hochladen</button>
|
|
</form>
|
|
{% endif %}
|
|
|
|
<form method="get" action="{{ path('admin_media') }}" class="list-toolbar" role="search" data-live-search>
|
|
<div class="list-search"><label for="media-list-search">Bilder durchsuchen</label><input id="media-list-search" type="search" name="q" maxlength="160" value="{{ query }}" placeholder="Titel oder Alternativtext …"></div>
|
|
<div><label for="media-list-archive">Status</label><select id="media-list-archive" name="archiv" data-search-default="0"><option value="0"{{ not archived ? ' selected' : '' }}>Aktive Bilder</option><option value="1"{{ archived ? ' selected' : '' }}>Mit archivierten Bildern</option></select></div>
|
|
<button class="secondary search-submit" type="submit">Anwenden</button>
|
|
<a class="text-button" data-search-reset href="{{ path('admin_media') }}"{{ not query and not archived ? ' hidden' : '' }}>Zurücksetzen</a>
|
|
</form>
|
|
{% include 'admin/search-feedback.html.twig' %}
|
|
<div id="list-results" class="stack" role="region" aria-label="Suchergebnisse" tabindex="-1">{% include 'admin/media-results.html.twig' %}</div>
|
|
{% endblock %}
|