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

web-app/django/VIM/apps/instruments/management/commands/download_imgs.py

@@ -5,14 +5,17 @@
 from io import BytesIO
 import requests
 from PIL import Image
+from django.conf import settings
 from django.core.management.base import BaseCommand
 
 
 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"

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] = [

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">

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 %}

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">