#39 Partial for Images

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/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 %}