Add setting for using placeholder images

isic/core/context_processors.py

@@ -7,3 +7,7 @@ def noindex(request):
 
 def sandbox_banner(request):
     return {"SANDBOX_BANNER": settings.ISIC_SANDBOX_BANNER}
+
+
+def placeholder_images(request):
+    return {"PLACEHOLDER_IMAGES": settings.ISIC_PLACEHOLDER_IMAGES}

isic/core/serializers.py

@@ -144,7 +144,7 @@ class ImageFileSerializer(serializers.Serializer):
     thumbnail_256 = serializers.SerializerMethodField()
 
     def get_full(self, obj: Image) -> dict:
-        if settings.DEBUG:
+        if settings.ISIC_PLACEHOLDER_IMAGES:
             url = f"https://picsum.photos/seed/{ obj.id }/1000"
         else:
             url = obj.accession.blob.url
@@ -155,8 +155,7 @@ def get_full(self, obj: Image) -> dict:
         }
 
     def get_thumbnail_256(self, obj: Image) -> dict:
-        # TODO: add a custom setting for using placeholder images
-        if settings.DEBUG:
+        if settings.ISIC_PLACEHOLDER_IMAGES:
             url = f"https://picsum.photos/seed/{ obj.id }/256"
         else:
             url = obj.accession.thumbnail_256.url

isic/core/templates/core/image_detail/base.html

@@ -28,7 +28,7 @@
       <div class="flex justify-between pt-4">
         <div>
           <a href="{{ image.accession.blob.url }}">
-            {% if debug %}
+            {% if PLACEHOLDER_IMAGES %}
               <img src="https://picsum.photos/seed/{{image.accession.id}}/256" style="object-fit: cover;" />
             {% else %}
               <img src="{{ image.accession.thumbnail_256.url }}" style="object-fit: cover;" />

isic/core/templates/core/partials/image_modal.html

@@ -9,7 +9,7 @@
 
   <div @click.away="open = false" class="h-screen overflow-hidden max-w-max mx-auto p-8 transform transition-all" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
     <div class="bg-white h-full relative p-8 rounded-lg text-left shadow-xl">
-      {% if debug %}
+      {% if PLACEHOLDER_IMAGES %}
         <template x-if="hovered">
           <img src="https://picsum.photos/seed/{{image.id}}/4000" class="max-h-full max-w-full w-auto mx-auto">
         </template>

isic/core/templates/core/partials/image_thumb.html

@@ -1,5 +1,5 @@
 <a class="cursor-pointer">
-  {% if debug %}
+  {% if PLACEHOLDER_IMAGES %}
     <img @mouseenter="hovered = true" @click="open = true" src="https://picsum.photos/seed/{{image.id}}/256">
   {% else %}
     <img @mouseenter="hovered = true" @click="open = true" src="{{ image.accession.thumbnail_256.url }}" />

isic/ingest/templates/ingest/partials/accession.html

@@ -3,7 +3,7 @@
 <div class="col accession-col" {% if review_mode %}x-data="accession({{ accession.id }});"{% endif %}>
   <div x-data="{ open: false, hovered: false }" class="pb-4">
     <a class="cursor-pointer">
-      {% if debug %}
+      {% if PLACEHOLDER_IMAGES %}
         <img @mouseenter="hovered = true" @click="open = true" src="https://picsum.photos/seed/{{accession.id}}/256">
       {% else %}
         <img @mouseenter="hovered = true" @click="open = true" src="{{ accession.thumbnail_256.url }}" />

isic/ingest/templates/ingest/partials/accession_modal.html

@@ -9,7 +9,7 @@
     <!-- This element is to trick the browser into centering the modal contents. -->
     <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
     <div @click.away="open = false" class="inline-block align-top bg-white rounded-lg p-8 text-left overflow-hidden shadow-xl transform transition-all my-8 align-middle max-w-2xl p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
-        {% if debug %}
+        {% if PLACEHOLDER_IMAGES %}
           <template x-if="hovered">
             <img src="https://picsum.photos/seed/{{accession.id}}/1000">
           </template>

isic/settings.py

@@ -113,6 +113,7 @@ def mutate_configuration(configuration: ComposedConfiguration) -> None:
         configuration.TEMPLATES[0]["OPTIONS"]["context_processors"] += [
             "isic.core.context_processors.noindex",
             "isic.core.context_processors.sandbox_banner",
+            "isic.core.context_processors.placeholder_images",
         ]
 
         configuration.REST_FRAMEWORK[
@@ -134,6 +135,8 @@ def mutate_configuration(configuration: ComposedConfiguration) -> None:
 
     ISIC_NOINDEX = values.BooleanValue(False)
     ISIC_SANDBOX_BANNER = values.BooleanValue(False)
+    ISIC_PLACEHOLDER_IMAGES = values.BooleanValue(False)
+
     ISIC_ELASTICSEARCH_URI = values.SecretValue()
     ISIC_ELASTICSEARCH_INDEX = "isic"
     ISIC_GUI_URL = "https://www.isic-archive.com"
@@ -195,6 +198,8 @@ class DevelopmentConfiguration(IsicMixin, DevelopmentBaseConfiguration):
 
     ZIP_DOWNLOAD_SERVICE_URL = "http://localhost:4008"
 
+    ISIC_PLACEHOLDER_IMAGES = False
+
 
 class TestingConfiguration(IsicMixin, TestingBaseConfiguration):
     ISIC_ELASTICSEARCH_INDEX = "isic-testing"

isic/studies/templates/studies/study_task_detail.html

@@ -20,7 +20,7 @@
     <div class="w-2/3 mr-8">
       <div x-data="{ open: false, hovered: false }">
         <a class="cursor-pointer">
-          {% if debug %}
+          {% if PLACEHOLDER_IMAGES %}
             <img class="max-w-full h-auto" @mouseenter="hovered = true" @click="open = true" src="https://picsum.photos/seed/{{study_task.image.id}}/2000/1000">
           {% else %}
             <img class="max-w-full h-auto" @mouseenter="hovered = true" @click="open = true" src="{{ study_task.image.accession.blob.url }}" />