Partial for PlaceImageGrid

django_lostplaces/lostplaces/templates/explorer/profile.html

@@ -63,25 +63,8 @@
 </section>
 
 <section class="LP-Section">
-	<h1 class="LP-Headline">{% trans 'Images submitted by' %} {{explorer.user.username}}</h1>
+	{% translate 'Images submitted by' as submitted_by %}
-	<div class="LP-ImageGrid">
+	{% include 'partials/placeImageGrid.html' with headline=submitted_by|add:' '|add:explorer.user.username image_list=assets.placeimages.all%}
-		<ul class="LP-ImageGrid__Container">
-			{% for place_image in assets.placeimages.all %}
-			<li class="LP-ImageGrid__Item">
-				<a href="{{ place_image.filename.large.url }}" class="LP-Link">
-					<img class="LP-Image" src="{{ place_image.filename.thumbnail.url }}">
-				</a>
-				{% if user.explorer == place_image.submitted_by%}
-				<span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
-					<a href="{% url 'place_image_delete' pk=place_image.id %}" class="LP-Link">
-						<img class="LP-Icon" src="{% static 'icons/cancel.svg' %}" />
-					</a>
-				</span>
-				{% endif %}
-			</li>
-			{% endfor %}
-		</ul>
-	</div>
 </section>
 
 <section class=" LP-Section">

django_lostplaces/lostplaces/templates/home_unauth.html

@@ -24,7 +24,7 @@
             <a href="{% url 'place_detail' pk=place.pk %}" class="LP-Link">
                 <article class="LP-PlaceTeaser">
                     <div class="LP-PlaceTeaser__Image">
-                        <img class="LP-Image" src="{{ place.placeimages.first.filename.thumbnail.url}}" />
+						{% include 'partials/image.html' with source_url=place.placeimages.first.filename.thumbnail.url %}
                     </div>
                     <div class="LP-PlaceTeaser__Meta">
                         <div class="LP-PlaceTeaser__Info">

django_lostplaces/lostplaces/templates/partials/image.html

@@ -0,0 +1,14 @@
+{% if link_url %}
+	<a
+		class="LP-Link"
+		href="{{link_url}}"
+	>
+{% endif %}
+	<figure class="LP-Figure">
+		<img 
+			src="{{ source_url }}"
+			{% if alt_text %} alt="{{alt_text}}" {% endif %}
+			class="LP-Image" 
+		/>
+	</figure>
+{% if link_url %}</a>{% endif %}

django_lostplaces/lostplaces/templates/partials/placeImageGrid.html

@@ -0,0 +1,21 @@
+	{% load static %}
+	
+	{% if headline %}
+	<h1 class="LP-Headline">{{headline}}</h1>
+	{% endif %}
+	<div class="LP-ImageGrid">
+		<ul class="LP-ImageGrid__Container">
+		{% for image in image_list %}
+			<li class="LP-ImageGrid__Item">
+				{% include 'partials/image.html' with source_url=image.filename.thumbnail.url link_url=image.filename.large.url %}
+			{% 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 %}
+			</li>
+		{% endfor %}
+		</ul>
+	</div>

django_lostplaces/lostplaces/templates/partials/place_teaser.html

@@ -3,7 +3,7 @@
 <article class="LP-PlaceTeaser {% if extended %} LP-PlaceTeaser--extended{% endif %}">
     <div class="LP-PlaceTeaser__Image">
         {% if place.placeimages.all|length > 0 %}
-            <img class="LP-Image" src="{{ place.placeimages.first.filename.thumbnail.url}}" />
+			{% include 'partials/image.html' with source_url=place.placeimages.first.filename.thumbnail.url %}
         {% else %}
             <img class="LP-Image" src="{% static 'images/missing_image.png' %}" />
         {% endif %}

django_lostplaces/lostplaces/templates/place/place_detail.html

@@ -25,9 +25,9 @@
     <header class="LP-PlaceDetail__Header">
         <h1 class="LP-Headline">{{ place.name }}</h1>
         {% if place.placeimages.first.filename.hero.url %}
-        <figure class="LP-PlaceDetail__Image">
+        <div class="LP-PlaceDetail__Image">
-            <img src="{{ place.placeimages.first.filename.hero.url }}" class="LP-Image" />
+			{% include 'partials/image.html' with source_url=place.placeimages.first.filename.hero.url %}
-        </figure>
+        </div>
         {% endif %}
     </header>
 
@@ -90,30 +90,8 @@
     </section>
 
     <section class="LP-Section">
-        <h1 class="LP-Headline">{% trans 'Images' %}</h1>
+		{% translate 'Images' as t_images %}
-        <div class="LP-ImageGrid">
+		{% include 'partials/placeImageGrid.html' with headline=t_images image_list=place.placeimages.all%}
-            <ul class="LP-ImageGrid__Container">
-                {% for place_image in place.placeimages.all %}
-                <li class="LP-ImageGrid__Item">
-                    <a href="{{ place_image.filename.large.url }}" class="LP-Link">
-                        <img class="LP-Image" src="{{ place_image.filename.thumbnail.url }}">
-                    </a>
-                    {% if user.explorer == place_image.submitted_by or user.explorer ==  place.submitted_by %}
-                    <span class="LP-ImageGrid__DeleteItem" title="Bild löschen">
-                        <a href="{% url 'place_image_delete' pk=place_image.id %}" class="LP-Link">
-                            <img class="LP-Icon" src="{% static 'icons/cancel.svg' %}" />
-                        </a>
-                    </span>
-                    {% endif %}
-                </li>
-                {% endfor %}
-                <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>
-            </ul>
-        </div>
     </section>
 
 </article>