feat: Get optional photo

src/fellchensammlung/api/serializers.py

@@ -2,6 +2,7 @@ from ..models import Animal, RescueOrganization, AdoptionNotice, Species, Image,
 from rest_framework import serializers
 import math
 
+
 class AdoptionNoticeSerializer(serializers.HyperlinkedModelSerializer):
     location = serializers.PrimaryKeyRelatedField(
         queryset=Location.objects.all(),
@@ -38,10 +39,13 @@ class AdoptionNoticeGeoJSONSerializer(serializers.ModelSerializer):
     url = serializers.SerializerMethodField()
     location_hr = serializers.SerializerMethodField()
     coordinates = serializers.SerializerMethodField()
+    image_url = serializers.SerializerMethodField()
+    image_alt = serializers.SerializerMethodField()
 
     class Meta:
         model = AdoptionNotice
-        fields = ('id', 'species', 'title', 'description', 'url', 'location_hr', 'coordinates')
+        fields = ('id', 'species', 'title', 'description', 'url', 'location_hr', 'coordinates', 'image_url',
+                  'image_alt')
 
     def get_species(self, obj):
         return None
@@ -49,6 +53,18 @@ class AdoptionNoticeGeoJSONSerializer(serializers.ModelSerializer):
     def get_url(self, obj):
         return obj.get_absolute_url()
 
+    def get_image_url(self, obj):
+        photo = obj.get_photo()
+        if photo is not None:
+            return obj.get_photo().image.url
+        return None
+
+    def get_image_alt(self, obj):
+        photo = obj.get_photo()
+        if photo is not None:
+            return obj.get_photo().alt_text
+        return None
+
     def get_coordinates(self, obj):
         """
         Coordinates are randomly moved around real location, roughly in a circle. The object id is used as angle so that
@@ -57,9 +73,9 @@ class AdoptionNoticeGeoJSONSerializer(serializers.ModelSerializer):
         It's not exactly a circle, because the earth is round.
         """
         if obj.location:
-            longitude_addition = math.sin(obj.id)/2000
+            longitude_addition = math.sin(obj.id) / 2000
-            latitude_addition = math.cos(obj.id)/2000
+            latitude_addition = math.cos(obj.id) / 2000
-            return [obj.location.longitude+longitude_addition, obj.location.latitude+latitude_addition]
+            return [obj.location.longitude + longitude_addition, obj.location.latitude + latitude_addition]
         return None
 
     def get_location_hr(self, obj):

src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-map.html

@@ -145,6 +145,8 @@
             const url = e.features[0].properties.url;
             const description = e.features[0].properties.description;
             const location_hr = e.features[0].properties.location_hr;
+            const image_url = e.features[0].properties.image_url;
+            const image_alt = e.features[0].properties.image_alt;
 
             // Ensure that if the map is zoomed out such that
             // multiple copies of the feature are visible, the
@@ -153,21 +155,30 @@
                 coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
             }
 
-            new maplibregl.Popup()
+            const description_column = `
-                .setLngLat(coordinates)
-                .setHTML(
-                    `<div class="popup-content is-size-7">
-                        <div class="columns  is-centered-mobile">
                             <div class="column">
                                 <strong><a class="is-size-7" href="${url}">${title}</a></strong><br>
                                 <span><strong>{% translate 'Ort' %}</strong>: ${location_hr}</span><br>
                                 <p class="is-size-7">${truncate(description, 80, url)}</p>
                             </div>
+                            `;
+            let picture_column = '';
+            if (image_url) {
+                picture_column = `
                             <div class="column">
                                 <figure class="image is-128x128">
-                                    <img src="https://bulma.io/assets/images/placeholders/128x128.png" />
+                                    <img src="${image_url}" alt="${image_alt}"/>
                                 </figure>
-                            </div>
+                            </div>`;
+            }
+
+            new maplibregl.Popup()
+                .setLngLat(coordinates)
+                .setHTML(`
+                    <div class="popup-content is-size-7">
+                        <div class="columns">
+                            ${description_column}
+                            ${picture_column}
                         </div>
                     </div>`
                 )