From 98dd53eddfef6050bc42369443a290b014c7a595 Mon Sep 17 00:00:00 2001
From: Kun Fang <fangk3740@gmail.com>
Date: Wed, 14 Aug 2024 12:08:34 -0400
Subject: [PATCH] fix: change image downloading dir & image url

- change image output dir in `download_imgs.py` command to downloading images into static volume;
- change image url in `import_instruments.py` command to store relative img urls into database;
- add `static` template tag in gallery view templates;

Refs: #138
---
 .../apps/instruments/management/commands/download_imgs.py    | 5 ++++-
 .../instruments/management/commands/import_instruments.py    | 5 +----
 .../instruments/templates/instruments/includes/listView.html | 2 +-
 .../templates/instruments/includes/masonryView.html          | 2 +-
 .../instruments/templates/instruments/includes/stdView.html  | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web-app/django/VIM/apps/instruments/management/commands/download_imgs.py b/web-app/django/VIM/apps/instruments/management/commands/download_imgs.py
index b35d2dd..3d13b04 100644
--- a/web-app/django/VIM/apps/instruments/management/commands/download_imgs.py
+++ b/web-app/django/VIM/apps/instruments/management/commands/download_imgs.py
@@ -5,6 +5,7 @@
 from io import BytesIO
 import requests
 from PIL import Image
+from django.conf import settings
 from django.core.management.base import BaseCommand
 
 
@@ -12,7 +13,9 @@ class Command(BaseCommand):
     """Django management command to download images and create thumbnails for instruments."""
 
     USER_AGENT = "UMIL/0.1.0 (https://vim.simssa.ca/; https://ddmal.music.mcgill.ca/)"
-    OUTPUT_DIR = "VIM/apps/instruments/static/instruments/images/instrument_imgs"
+    OUTPUT_DIR = os.path.join(
+        settings.STATIC_ROOT, "instruments", "images", "instrument_imgs"
+    )
     CSV_PATH = "startup_data/vim_instruments_with_images-15sept.csv"
 
     help = "Download images and create thumbnails for instruments"
diff --git a/web-app/django/VIM/apps/instruments/management/commands/import_instruments.py b/web-app/django/VIM/apps/instruments/management/commands/import_instruments.py
index b82b8ff..e208ee9 100644
--- a/web-app/django/VIM/apps/instruments/management/commands/import_instruments.py
+++ b/web-app/django/VIM/apps/instruments/management/commands/import_instruments.py
@@ -6,7 +6,6 @@
 import requests
 from django.core.management.base import BaseCommand
 from django.db import transaction
-from django.conf import settings
 from VIM.apps.instruments.models import Instrument, InstrumentName, Language, AVResource
 
 
@@ -136,9 +135,7 @@ def handle(self, *args, **options) -> None:
             reader = csv.DictReader(csvfile)
             instrument_list: list[dict] = list(reader)
         self.language_map = Language.objects.in_bulk(field_name="wikidata_code")
-        img_dir = os.path.join(
-            settings.STATIC_URL, "instruments", "images", "instrument_imgs"
-        )
+        img_dir = "instruments/images/instrument_imgs"
         with transaction.atomic():
             for ins_i in range(0, len(instrument_list), 50):
                 ins_ids_subset: list[str] = [
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html
index 3d5004e..080dad1 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html
@@ -6,7 +6,7 @@
       <div class="row g-0 p-2">
         <div class="col-md-2 align-items-center list-img-container">
           <a href="#" class="text-decoration-none">
-            <img src="{{ instrument.thumbnail.url }}" class="img-fluid rounded" alt="instrument thumbnail" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';" />
+            <img src="{% static instrument.thumbnail.url %}" class="img-fluid rounded" alt="instrument thumbnail" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';" />
           </a>
         </div>
         <div class="col-md-10 card-body pb-2 pt-0">
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html
index 0d14ee7..5f27255 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html
@@ -8,7 +8,7 @@
          class="text-decoration-none"
          target="_blank">
         <div class="card mb-3">
-          <img src="{{ instrument.thumbnail.url }}" class="card-img-top rounded p-2" alt="instrument thumbnail" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';" />
+          <img src="{% static instrument.thumbnail.url %}" class="card-img-top rounded p-2" alt="instrument thumbnail" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';" />
           <div class="card-body pb-0 pt-0">
             <p class="card-title text-center notranslate ">
               {% for instrumentname in instrument.instrumentname_set.all %}
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html
index 75fa0c5..d938a7c 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html
@@ -10,7 +10,7 @@
          target="_blank">
         <div class="card mb-3">
           <div class="square-box">
-            <img src="{{ instrument.thumbnail.url }}" class="card-img-top rounded p-2 img-fluid" alt="instrument thumbnail" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';" />
+            <img src="{% static instrument.thumbnail.url %}" class="card-img-top rounded p-2 img-fluid" alt="instrument thumbnail" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';" />
           </div>
           <div class="card-body pb-0 pt-0">
             <p class="card-title text-center notranslate">