use own image not found

.gitignore

@@ -3,4 +3,5 @@ __pycache__
 .env
 db.sqlite3
 /static/
-/media/
+media/images/*
+!media/images/none.svg

app/static/css/_edit.scss

@@ -8,9 +8,9 @@
     }
     
     .image-not-found {
-        background-image: url("https://www.themoviedb.org/assets/2/v4/glyphicons/basic/glyphicons-basic-38-picture-grey-c2ebdbb057f2a7614185931650f8cee23fa137b93812ccb132b9df511df1cfac.svg");
-        background-repeat: no-repeat;
-        background-position:center;
+        object-fit: contain;
+        width: 10rem;
+        height: 15rem;
         background-color: rgb(44, 48, 50);
     }
 

app/templates/app/edit.html

@@ -1,3 +1,5 @@
+{% load static %}
+
 <div class="d-flex flex-column box">
     <div class="d-flex flex-row">
         
@@ -6,7 +8,7 @@
         {% elif media.response.poster_path %}
             <img class="poster flex-shrink-0" src="https://image.tmdb.org/t/p/w500{{media.response.poster_path}}">
         {% else %}
-            <div class="image-not-found poster flex-shrink-0"></div>
+            <img class="image-not-found flex-shrink-0" src="{% get_media_prefix %}/images/none.svg">
         {% endif %}
 
         <div class="d-flex flex-column content flex-grow-1">

app/templates/app/search.html

@@ -36,7 +36,7 @@
                       {% elif media.poster_path %}
                         <img class="poster flex-shrink-0 card-img-top" src="https://image.tmdb.org/t/p/w780{{media.poster_path}}">  
                       {% else %}
-                        <img class="image-not-found flex-shrink-0 card-img-top" src="https://www.themoviedb.org/assets/2/v4/glyphicons/basic/glyphicons-basic-38-picture-grey-c2ebdbb057f2a7614185931650f8cee23fa137b93812ccb132b9df511df1cfac.svg">
+                        <img class="image-not-found flex-shrink-0 card-img-top" src="{% get_media_prefix %}/images/none.svg">
                       {% endif %}
                       <div class="card-body">
                         <div class="card-title">{{media.name}}{{media.title}}</div>

app/utils/database.py

@@ -1,6 +1,8 @@
 from app.models import Media
 from app.utils import helpers
 from django.core.files import File
+from django.conf import settings
+
 
 def add_media(request):
     media = Media()
@@ -31,21 +33,23 @@ def add_media(request):
 
     if media.api == "mal":
         media.media_type = request.POST["media_type"]
-        img_temp = helpers.get_image_temp(request.POST["image"])
-    else:
-        media.media_type = request.POST["media_type"]
-        img_temp = helpers.get_image_temp(f"https://image.tmdb.org/t/p/w92{request.POST['image']}")
-
         if request.POST['image'] == "" or request.POST['image'] == None:
-        media.image.save(f"none.svg", File(img_temp))
+            media.image = "images/none.svg"
+            media.save()
         else:
+            img_temp = helpers.get_image_temp(request.POST["image"])
             if media.media_type == "anime":
                 media.image.save(f"anime-{request.POST['image'].rsplit('/', 1)[-1]}", File(img_temp))
-        
             elif media.media_type == "manga":
                 media.image.save(f"manga-{request.POST['image'].rsplit('/', 1)[-1]}", File(img_temp))
-        
+            img_temp.close()
     else:
+        media.media_type = request.POST["media_type"]
+        if request.POST['image'] == "" or request.POST['image'] == None:
+            media.image = "images/none.svg"
+            media.save()
+        else:
+            img_temp = helpers.get_image_temp(f"https://image.tmdb.org/t/p/w92{request.POST['image']}")
             media.image.save(f"tmdb-{request.POST['image'].rsplit('/', 1)[-1]}", File(img_temp))
             img_temp.close()
     

app/utils/helpers.py

@@ -17,9 +17,6 @@ def convert_mal_media_type(media_type):
 def get_image_temp(url):
     img_temp = NamedTemporaryFile(delete=True)
 
-    if url in ["", "https://image.tmdb.org/t/p/w92None", "https://image.tmdb.org/t/p/w92"]:
-        r = requests.get("https://www.themoviedb.org/assets/2/v4/glyphicons/basic/glyphicons-basic-38-picture-grey-c2ebdbb057f2a7614185931650f8cee23fa137b93812ccb132b9df511df1cfac.svg")
-    else:
     r = requests.get(url)
     img_temp.write(r.content)
     img_temp.flush()
@@ -27,10 +24,7 @@ def get_image_temp(url):
 
 
 async def download_image(session, url, media_type):
-    if url in ["", "https://image.tmdb.org/t/p/w92None", "https://image.tmdb.org/t/p/w92"]:
-        url = "https://www.themoviedb.org/assets/2/v4/glyphicons/basic/glyphicons-basic-38-picture-grey-c2ebdbb057f2a7614185931650f8cee23fa137b93812ccb132b9df511df1cfac.svg"
-        location = f"{settings.MEDIA_ROOT}/images/none.svg"
-    else:
+    if url not in ["", "https://image.tmdb.org/t/p/w92None", "https://image.tmdb.org/t/p/w92"]:
         location = f"{settings.MEDIA_ROOT}/images/{media_type}-{url.rsplit('/', 1)[-1]}"
     
         # Create the directory if it doesn't exist

media/images/none.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#B5B5B5;}
+</style>
+<path class="st0" d="M12.82,12.02c0,1.32-1.07,2.39-2.39,2.39s-2.39-1.07-2.39-2.39s1.07-2.39,2.39-2.39S12.82,10.69,12.82,12.02z"
+	/>
+<path class="st0" d="M5.64,6.43c-1.32,0-2.39,1.07-2.39,2.39v14.35c0,1.32,1.07,2.39,2.39,2.39h20.73c1.32,0,2.39-1.07,2.39-2.39
+	V8.83c0-1.32-1.07-2.39-2.39-2.39H5.64z M26.37,8.03c0.44,0,0.8,0.36,0.8,0.8v9.57l-6.02-3.1c-0.31-0.15-0.68-0.09-0.92,0.15
+	l-5.92,5.92l-4.24-2.83c-0.32-0.21-0.74-0.17-1,0.1l-4.22,3.75v0.86c0-0.02,0-0.04,0-0.06V8.83c0-0.44,0.36-0.8,0.8-0.8H26.37z"/>
+</svg>