lostplaces-backend/django_lostplaces/lostplaces/templates/partials/placeImageGrid.html

43 lines
1.7 KiB
HTML

{% load static %}
{% load lostplaces %}
{% if headline %}
<h1 class="LP-Headline">{{headline}}</h1>
{% endif %}
<div class="LP-ImageGrid">
<ul class="LP-ImageGrid__Container">
{% for image in image_list %}
<li id="thumbnail{{forloop.counter0}}" class="LP-ImageGrid__Item">
{% include 'partials/image.html' with source_url=image.filename.thumbnail.url link_url="#image"|addstr:forloop.counter0 %}
{% if user.explorer == image.submitted_by%}
<span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
<a href="{% url 'place_image_delete' pk=image.id %}" class="LP-Link">
<img class="LP-Icon" src="{% static 'icons/cancel.svg' %}" />
</a>
</span>
{% endif %}
<div id="image{{forloop.counter0}}" class="LP-ImageGrid__LightBox">
<img class="LP-ImageGrid__FullSizeImage" src="{{image.filename.large.url}}" loading="lazy"/>
{% if forloop.counter0 < image_list|length|add:-1 %}
<a href="#image{{forloop.counter0|add:1}}" class="LP-ImageGrid__Next">Next</a>
{% endif %}
{% if forloop.counter0 > 0 %}
<a href="#image{{forloop.counter0|add:-1}}" class="LP-ImageGrid__Previous">Previous</a>
{% endif %}
<span class="LP-ImageGrid__Close LP-ImageGrid__DeleteItem" title="Schließen">
<a href="#" class="LP-Link">
<img class="LP-Icon" src="{% static 'icons/cancel.svg' %}"/>
</a>
</span>
</div>
</li>
{% endfor %}
{% if place %}
<li class="LP-ImageGrid__Item LP-ImageGrid__Item--add" title="Bild hinzufügen">
<a class="LP-Link" href="{% url 'place_image_create' place_id=place.id %}">
<img class="LP-Icon" src="{% static 'icons/plus.svg' %}" />
</a>
</li>
{% endif %}
</ul>
</div>