feat: Add photos to list of adoption notices

src/fellchensammlung/models.py

@@ -84,6 +84,37 @@ class AdoptionNotice(models.Model):
         """Returns the url to access a detailed page for the animal."""
         return reverse('adoption-notice-detail', args=[str(self.id)])
 
+    def get_photos(self):
+        """
+        First trys to get group photos that are attached to the adoption notice if there is none it trys to fetch
+        them from the animals
+        """
+        group_photos = self.photos.all()
+        if len(group_photos) > 0:
+            return group_photos
+        else:
+            photos = []
+            for animal in self.animals:
+                photos.extend(animal.photos.all())
+            if len(photos) > 0:
+                return photos
+
+    def get_photo(self):
+        """
+        Returns the first photo it finds.
+        First trys to get group photos that are attached to the adoption notice if there is none it trys to fetch
+        them from the animals
+        """
+        group_photos = self.photos.all()
+        if len(group_photos) > 0:
+            return group_photos[0]
+        else:
+            photos = []
+            for animal in self.animals:
+                photos.extend(animal.photos.all())
+            if len(photos) > 0:
+                return photos[0]
+
 
 class Animal(models.Model):
     MALE_NEUTERED = "M_N"

src/fellchensammlung/static/fellchensammlung/css/styles.css

@@ -342,3 +342,22 @@ h1 {
     max-width: 100%;
     border-radius: 10%;
 }
+
+.adoption-notices {
+    display: flex;
+    flex-wrap: wrap;
+    list-style-type:none;
+}
+
+.card-adoption-notice {
+    flex: 1 16%;
+    margin: 10px;
+    border-radius: 3%;
+    border: 4px grey solid;
+    padding: 5px;
+}
+
+.card-adoption-notice img {
+    max-width: 100%;
+    border-radius: 10%;
+}

src/fellchensammlung/templates/fellchensammlung/list-adoption-notices.html

@@ -1,12 +1,35 @@
 {% load custom_tags %}
-<ul>
+<ul class="adoption-notices">
     {% for adoption_notice in adoption_notices %}
-        <li>
+        <li class="card-adoption-notice">
             <div>
                 <h1><a href="{{ adoption_notice.get_absolute_url }}"> {{ adoption_notice.name }}</a></h1>
-                <p><b>Notfellchen:</b>  {{ adoption_notice.animals.all|join_link:", " | safe }}
+                <p><b>Notfellchen:</b> {{ adoption_notice.animals.all|join_link:", " | safe }}
                 </p>
-                <p>{{ adoption_notice.description }}</p>
+                <p>
+                    <b>Ort</b>
+                    {% if adoption_notice.location %}
+                        {{ adoption_notice.location }}
+                    {% else %}
+                        Keine Ort angegeben
+                    {% endif %}
+                </p>
+                <p>
+                    {% if adoption_notice.description %}
+                        {{ adoption_notice.description }}
+                    {% else %}
+                        Keine Beschreibung
+                    {% endif %}
+                </p>
+                {% if adoption_notice.get_photo %}
+                    <div class="adoption-notice-img">
+                        <img title="{{ adoption_notice.get_photo.title }}"
+                             src="/media/{{ adoption_notice.get_photo.image }}"
+                             alt="{{ adoption_notice.get_photo.alt_text }}">
+                    </div>
+                {% else %}
+                    No photo
+                {% endif %}
             </div>
         </li>
     {% endfor %}