Added different sizes and thumbnail for image.Fix #100

Author: epou

mosquito_alert/annotations/admin.py

@@ -1,8 +1,7 @@
 from django import forms
-from django.contrib import admin
 from django.contrib.postgres.forms import SimpleArrayField
-from django.utils.html import format_html
 from django.utils.translation import gettext_lazy as _
+from imagekit.admin import AdminThumbnail
 
 from mosquito_alert.utils.admin import TimeStampedModelAdminMixin
 
@@ -31,17 +30,13 @@ class BasePhotoAnnotationTaskAdminMixin(BaseAnnotationTaskAdminMixin):
     _photo_annotation_task_fields = ("photo",)
 
     fields = BaseAnnotationTaskAdminMixin.fields + _photo_annotation_task_fields
-    readonly_fields = ("preview",) + BaseAnnotationTaskAdminMixin.readonly_fields
+    readonly_fields = ("image_thumbnail",) + BaseAnnotationTaskAdminMixin.readonly_fields
 
     search_fields = ("photo__image",)
     list_display = _photo_annotation_task_fields + TimeStampedModelAdminMixin.list_display
     list_filter = TimeStampedModelAdminMixin.list_filter
 
-    @admin.display(description=_("Photo preview"))
-    def preview(self, obj):
-        if not obj._state.adding:
-            return format_html(f"<img src='{obj.photo.image.url}' height='150' />")
-        return "Upload image for preview"
+    image_thumbnail = AdminThumbnail(image_field=lambda obj: obj.photo.thumbnail)
 
 
 class BaseAnnotationAdminMixin:

mosquito_alert/identifications/admin.py

@@ -328,7 +328,7 @@ class PhotoIdentificationTaskAdmin(BaseTaskWithResultsAdminMixin, BasePhotoAnnot
             {
                 "fields": (
                     "task",
-                    ("photo", "preview"),
+                    ("photo", "image_thumbnail"),
                     ("created_at", "updated_at"),
                     "is_completed",
                 )
@@ -380,12 +380,6 @@ class PhotoIdentificationTaskAdmin(BaseTaskWithResultsAdminMixin, BasePhotoAnnot
         ExternalIdentificationAdminInline,
     ]
 
-    @admin.display(description=_("Photo preview"))
-    def preview(self, obj):
-        if not obj._state.adding:
-            return format_html(f"<img src='{obj.photo.image.url}' height='150' />")
-        return "Upload image for preview"
-
     class Media(NumericFilterModelAdmin.Media):
         pass
 

mosquito_alert/images/admin.py

@@ -3,6 +3,7 @@
 from django.contrib import admin
 from django.utils.html import format_html
 from django.utils.safestring import mark_safe
+from imagekit.admin import AdminThumbnail
 from nested_admin.nested import NestedModelAdmin
 from pygments import highlight
 from pygments.formatters import HtmlFormatter
@@ -19,32 +20,26 @@ class m2mPhotoAdminInlineMixin:
     can_delete = False
     fields = [
         "photo",
-        "preview",
+        "image_thumbnail",
     ]
     readonly_fields = [
-        "preview",
+        "image_thumbnail",
     ]
 
-    def preview(self, obj):
-        if not obj._state.adding:
-            return format_html(f"<img src='{obj.photo.image.url}' height='150' />")
-        return "Upload image for preview"
+    image_thumbnail = AdminThumbnail(image_field=lambda obj: obj.photo.thumbnail)
 
 
 @admin.register(Photo)
 class PhotoAdmin(NestedModelAdmin):
-    list_display = ("__str__", "user", "created_at", "preview")
+    list_display = ("__str__", "user", "created_at", "image_thumbnail")
     list_filter = ("user", "created_at")
-    fields = ("created_at", ("image", "preview"))
-    readonly_fields = ("preview", "created_at")
+    fields = ("created_at", ("image", "image_thumbnail"))
+    readonly_fields = ("image_thumbnail", "created_at")
     list_per_page = 10
 
-    inlines = [FlaggedContentNestedInlineAdmin, PhotoIdentificationTaskAdminInline]
+    image_thumbnail = AdminThumbnail(image_field="thumbnail")
 
-    def preview(self, obj):
-        if not obj._state.adding:
-            return format_html(f"<img src='{obj.image.url}' height='150' />")
-        return "Upload image for preview"
+    inlines = [FlaggedContentNestedInlineAdmin, PhotoIdentificationTaskAdminInline]
 
     @admin.display(description="EXIF")
     def exif_dict(self, obj):

mosquito_alert/images/models.py

@@ -5,13 +5,14 @@
 from django.db import models
 from django.utils.functional import cached_property
 from django.utils.translation import gettext_lazy as _
-from imagekit.processors import ResizeToFit
+from imagekit.models import ImageSpecField
+from imagekit.processors import ResizeToFit, Thumbnail
 from PIL import ExifTags, Image
 
 from mosquito_alert.moderation.models import FlagModeratedModel
 from mosquito_alert.utils.models import TimeStampedModel
 
-from .fields import ProcessedImageField
+from .fields import ProcessedImageField as ProcessedImageWithExifField
 
 
 def image_upload_to(instance, filename):
@@ -39,12 +40,24 @@ class Photo(FlagModeratedModel, TimeStampedModel):
     # NOTE: If a processor to autorotate is used, check that
     #       EXIF orientation is modified accordingly.
     #       Check PIL.ImageOps.exif_transpose()
-    image = ProcessedImageField(
+    image = ProcessedImageWithExifField(
         upload_to=image_upload_to,
         processors=[ResizeToFit(height=1080, upscale=False)],
         format="JPEG",
         options={"quality": 95},
     )
+    image_large = ImageSpecField(
+        source="image", processors=[ResizeToFit(height=720, upscale=False)], format="WEBP", options={"quality": 80}
+    )
+    image_medium = ImageSpecField(
+        source="image", processors=[ResizeToFit(height=360, upscale=False)], format="WEBP", options={"quality": 70}
+    )
+    thumbnail = ImageSpecField(
+        source="image",
+        processors=[Thumbnail(height=150, width=150, crop=True)],
+        format="WEBP",
+        options={"quality": 40},
+    )
     # TODO: license + attributions
 
     # Attributes - Optional

mosquito_alert/images/tests/test_admin.py

@@ -4,6 +4,7 @@
 from django.core.files import File
 from django.core.files.uploadedfile import SimpleUploadedFile
 from django.urls import reverse
+from imagekit.admin import AdminThumbnail
 
 from mosquito_alert.users.tests.factories import UserFactory
 
@@ -81,15 +82,11 @@ def test_update_does_not_modify_user(self, client):
     def test_created_at_field_is_readonly(self):
         assert "created_at" in PhotoAdmin.readonly_fields
 
-    def test_preview_is_readonly(self):
-        assert "preview" in PhotoAdmin.readonly_fields
+    def test_image_thumbnail_is_readonly(self):
+        assert "image_thumbnail" in PhotoAdmin.readonly_fields
 
-    def test_preview_html(self):
-        p = PhotoFactory()
-
-        photo_admin = PhotoAdmin(model=Photo, admin_site=AdminSite())
-
-        assert photo_admin.preview(p) == f"<img src='{p.image.url}' height='150' />"
+    def test_image_thumbnail_is_AdminThumbnail(self):
+        assert isinstance(PhotoAdmin.image_thumbnail, AdminThumbnail)
 
     def test_view(self, admin_client):
         p = PhotoFactory()

mosquito_alert/images/tests/test_models.py

@@ -32,6 +32,9 @@ def test_user_on_delete_set_null(self):
     def test_user_related_name(self):
         assert self.model._meta.get_field("user").remote_field.related_name == "photos"
 
+    def test_image_can_not_be_null(self):
+        assert not self.model._meta.get_field("image").null
+
     def test_image_is_uploaded_in_images_path(self):
         p = self.factory_cls()
         assert os.path.dirname(p.image.name) == "images"
@@ -69,6 +72,27 @@ def test_image_is_not_resized_if_smaller_than_1080p(self):
         assert p.image.width == 1080
         assert p.image.height == 600
 
+    def test_image_large(self):
+        p = self.factory_cls(image__width=2160, image__height=1080)
+
+        assert p.image_large is not None
+        assert p.image_large.width == 1440
+        assert p.image_large.height == 720
+
+    def test_image_medium(self):
+        p = self.factory_cls(image__width=2160, image__height=1080)
+
+        assert p.image_medium is not None
+        assert p.image_medium.width == 720
+        assert p.image_medium.height == 360
+
+    def test_thumbnail(self):
+        p = self.factory_cls(image__width=2160, image__height=1080)
+
+        assert p.thumbnail is not None
+        assert p.thumbnail.width == 150
+        assert p.thumbnail.height == 150
+
     def test_exif_is_preserved_from_original_image(self):
         p = self.factory_cls(image__from_path=testdata.TESTEXIFIMAGE_PATH)