60 lines
4.1 KiB
Twig
60 lines
4.1 KiB
Twig
<div class="section-head">
|
||
<h2>{{ archived ? 'Alle Bilder einschließlich Archiv' : 'Bilder' }} <span class="count">{{ library.total }}</span></h2>
|
||
<span class="muted">{{ library.total ? (library.page - 1) * library.perPage + 1 : 0 }}–{{ min(library.page * library.perPage, library.total) }} von {{ library.total }}</span>
|
||
</div>
|
||
|
||
{% if library.items is empty %}
|
||
<div class="empty">
|
||
<h3>{{ query ? 'Keine passenden Bilder.' : (archived ? 'Keine Bilder vorhanden.' : 'Keine Bilder in der Mediathek.') }}</h3>
|
||
<p>{{ query ? 'Ändere oder leere die Suche.' : (is_granted('ROLE_EDITOR') ? 'Lade oben dein erstes Bild hoch.' : 'Ein Redakteur kann Bilder hochladen.') }}</p>
|
||
</div>
|
||
{% else %}
|
||
<ul class="library-grid">
|
||
{% for item in library.items %}
|
||
<li class="library-tile">
|
||
{# The smallest variant is the thumbnail; the largest opens in a new tab. #}
|
||
<a href="{{ (item.variants|last).src }}" target="_blank" rel="noopener" aria-label="{{ item.title }} in Originalgröße öffnen">
|
||
<img src="{{ (item.variants|first).src }}" alt="" loading="lazy" width="{{ (item.variants|first).width }}" height="{{ (item.variants|first).height }}">
|
||
</a>
|
||
<div class="library-body">
|
||
<strong>{{ item.title }}</strong>
|
||
<span class="muted">{{ (item.variants|last).width }} × {{ (item.variants|last).height }} px{% if item.archived %} · archiviert{% endif %}</span>
|
||
<span class="muted">{{ item.alt ? 'Alternativtext gesetzt' : 'Kein Alternativtext' }}</span>
|
||
<code>{{ item.id }}</code>
|
||
</div>
|
||
{% if is_granted('ROLE_EDITOR') %}
|
||
<details class="sheet">
|
||
<summary aria-label="Angaben zu {{ item.title }}">Angaben</summary>
|
||
<div class="sheet-body">
|
||
<form action="{{ path('admin_media_save', {id: item.id}) }}" method="post">
|
||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('media-form') }}">
|
||
<input type="hidden" name="version" value="{{ item.version }}">
|
||
<input type="hidden" name="seite" value="{{ library.page }}"><input type="hidden" name="q" value="{{ query }}">
|
||
<input type="hidden" name="archiv" value="{{ archived ? '1' : '' }}">
|
||
<label for="title-{{ item.id }}">Bildtitel</label>
|
||
<input id="title-{{ item.id }}" name="title" maxlength="160" required value="{{ item.title }}">
|
||
<label for="alt-{{ item.id }}">Alternativtext</label>
|
||
<textarea id="alt-{{ item.id }}" name="alt" maxlength="300" rows="2">{{ item.alt }}</textarea>
|
||
<p class="field-help">Beschreibt, was zu sehen ist. Das ist, was Menschen mit Screenreader vom Bild haben. Bei rein dekorativen Bildern leer lassen.</p>
|
||
<label class="check-label" for="archived-{{ item.id }}"><input id="archived-{{ item.id }}" name="archived" type="checkbox" value="1"{{ item.archived ? ' checked' : '' }}> Archiviert</label>
|
||
<p class="field-help">Archivierte Bilder erscheinen nicht mehr in der Auswahl, bleiben aber ausgeliefert – eine Seite, die das Bild verwendet, verliert es nicht.</p>
|
||
<button class="primary" type="submit">Angaben speichern</button>
|
||
</form>
|
||
</div>
|
||
</details>
|
||
{% endif %}
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
|
||
{% if library.pages > 1 %}
|
||
<nav class="pager" aria-label="Seiten der Mediathek">
|
||
{% if library.page > 1 %}<a class="secondary" href="{{ path('admin_media', {seite: library.page - 1, archiv: archived ? 1 : null, q: query}) }}" rel="prev"><span aria-hidden="true">←</span> Neuere</a>{% endif %}
|
||
<span class="muted">Seite {{ library.page }} von {{ library.pages }} · {{ library.total }} Bilder</span>
|
||
{% if library.page < library.pages %}<a class="secondary" href="{{ path('admin_media', {seite: library.page + 1, archiv: archived ? 1 : null, q: query}) }}" rel="next">Ältere <span aria-hidden="true">→</span></a>{% endif %}
|
||
</nav>
|
||
{% endif %}
|
||
{% endif %}
|
||
|
||
<p class="footnote">KantSites · Arbeitsstand</p>
|