add lazyload images with a default placeholder

FuzzyGrim · Jan 21, 2025 · 3be04d3 · 3be04d3
1 parent a4dd9ba
commit 3be04d3
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 60 deletions.
diff --git a/src/app/models.py b/src/app/models.py
@@ -272,6 +272,7 @@ def get_score_distribution(self, user_media):
                     "title": media.item.title,
                     "image": media.item.image,
                     "score": media.score,
+                    "url": media.item.url,
                 }
 
                 # Use negative score for max heap (heapq implements min heap)

diff --git a/src/static/css/main.css b/src/static/css/main.css
@@ -152,7 +152,9 @@ debug, info, success, warning, error */
     cursor: pointer;
   }
 
-  .image-not-found, .lazyload {
+  .image-not-found,
+  .lazyload,
+  .lazyloading {
     width: 100%;
     aspect-ratio: 2/3;
     object-fit: contain;
@@ -387,28 +389,44 @@ debug, info, success, warning, error */
   background-color: var(--bg-foreground);
 }
 
-.episode-img-none {
-  background-image: url(https://www.themoviedb.org/assets/2/v4/glyphicons/basic/glyphicons-basic-38-picture-grey-c2ebdbb057f2a7614185931650f8cee23fa137b93812ccb132b9df511df1cfac.svg);
-  background-color: var(--bg-img-none);
-  background-position: center;
-  background-repeat: no-repeat;
-}
+.episode-card {
+  .episode-img {
+    border-top-left-radius: var(--bs-border-radius);
+    border-bottom-left-radius: var(--bs-border-radius);
+    height: 100%;
+    width: 100%;
+    aspect-ratio: 16/10;
+    object-fit: cover;
+  }
 
-.description {
-  /* show only 2 lines of text */
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
+  .episode-img-none,
+  .lazyload,
+  .lazyloading {
+    border-top-left-radius: var(--bs-border-radius);
+    border-bottom-left-radius: var(--bs-border-radius);
+    height: 100%;
+    width: 100%;
+    aspect-ratio: 16/10;
+    object-fit: contain;
+    background-color: var(--bg-img-none);
+  }
+
+  .description {
+    /* show only 2 lines of text */
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
 
-.date-btn-group {
-  .btn {
-    border-color: #495057;
+  .date-btn-group {
+    .btn {
+      border-color: #495057;
 
-    &:hover {
-      color: white;
+      &:hover {
+        color: white;
+      }
     }
   }
 }
@@ -560,6 +578,6 @@ debug, info, success, warning, error */
 }
 
 /* disable clicking on column header */
-.column-header-cell{
+.column-header-cell {
   pointer-events: none;
-}
+}
diff --git a/src/templates/app/home.html b/src/templates/app/home.html
@@ -13,9 +13,9 @@ <h1 class="fs-4 text-center mb-2">{{ media_type|capfirst }} in Progress</h1>
         {% for media in media_list %}
           <div class="card media-card mx-auto">
             <a href="{{ media.item.url }}">
-              <img data-src="{{ media.item.image }}"
-                   src={{ IMG_NONE }}
-                   class="card-img lazyload {% if media.item.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
+              <img class="card-img lazyload {% if media.item.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
+                   data-src="{{ media.item.image }}"
+                   src="{{ IMG_NONE }}"
                    alt="{{ media }}"
                    data-expand="1000" />
             </a>
@@ -39,7 +39,3 @@ <h1 class="text-center fs-3">You don't have any media in progress.</h1>
     </div>
   {% endfor %}
 {% endblock container %}
-
-{% block js %}
-  <script src="{% static "js/lazysizes.min.js" %}" async=""></script>
-{% endblock js %}
diff --git a/src/templates/app/media_details.html b/src/templates/app/media_details.html
@@ -28,8 +28,9 @@ <h2 class="fs-5 fw-semibold">{{ name|no_underscore|title }}</h2>
               {% for related in related_items %}
                 <div class="card media-card">
                   <a href="{% if name == "seasons" %}{% url 'season_details' source=media.source media_id=media.media_id title=media.title|slug season_number=related.season_number %}{% else %}{% url 'media_details' source=media.source media_type=media.media_type media_id=related.media_id title=related.title|slug %}{% endif %}">
-                    <img src="{{ related.image }}"
-                         class="card-img {% if related.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
+                    <img src="{{ IMG_NONE }}"
+                         data-src="{{ related.image }}"
+                         class="card-img lazyload {% if related.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
                          alt="{{ related.title }}" />
                   </a>
 

diff --git a/src/templates/app/media_grid.html b/src/templates/app/media_grid.html
@@ -40,6 +40,7 @@
         <div class="card media-card">
           <a href="{{ media.item.url }}">
             <img class="card-img lazyload {% if media.item.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
+                 src="{{ IMG_NONE }}"
                  data-src="{{ media.item.image }}"
                  data-expand="1000"
                  alt="{{ media }}" />
@@ -79,7 +80,3 @@ <h1 class="text-center fs-3">
     </div>
   {% endif %}
 {% endblock container %}
-
-{% block js %}
-  <script src="{% static "js/lazysizes.min.js" %}" async=""></script>
-{% endblock js %}
diff --git a/src/templates/app/media_list.html b/src/templates/app/media_list.html
@@ -54,6 +54,7 @@
                 <a href="{{ media.item.url }}">
                   <img class="lazyload object-fit-cover"
                        data-src="{{ media.item.image }}"
+                       src="{{ IMG_NONE }}"
                        data-expand="1000"
                        width="40"
                        height="40"
@@ -105,7 +106,3 @@ <h1 class="text-center fs-3">
     </div>
   {% endif %}
 {% endblock container %}
-
-{% block js %}
-  <script src="{% static "js/lazysizes.min.js" %}" async=""></script>
-{% endblock js %}
diff --git a/src/templates/app/search.html b/src/templates/app/search.html
@@ -22,7 +22,7 @@ <h1 class="text-center fs-3">No results found!</h1>
              aria-label="Basic radio toggle button group">
           <a href="{% url 'search' %}?q={{ request.GET.q }}&media_type=manga"
              class="btn btn-outline-secondary {% if request.GET.source != "mangaupdates" %}active{% endif %}">MyAnimeList</a>
- 
+
           <a href="{% url 'search' %}?q={{ request.GET.q }}&media_type=manga&source=mangaupdates"
              class="btn btn-outline-secondary {% if request.GET.source == "mangaupdates" %}active{% endif %}">MangaUpdates</a>
         </div>
@@ -32,8 +32,10 @@ <h1 class="text-center fs-3">No results found!</h1>
       {% for media in query_list %}
         <div class="card media-card">
           <a href="{% url 'media_details' source=media.source media_type=media.media_type media_id=media.media_id title=media.title|slug %}">
-            <img src="{{ media.image }}"
-                 class="card-img {% if media.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
+            <img class="card-img lazyload {% if media.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
+                 src="{{ IMG_NONE }}"
+                 data-src="{{ media.image }}"
+                 data-expand="1000"
                  alt="{{ media.title }}" />
           </a>
 
@@ -51,5 +53,6 @@ <h1 class="text-center fs-3">No results found!</h1>
 {% endblock container %}
 
 {% block js %}
-  <script src="{% static 'js/manga-source.js' %}" data-source="{{ request.GET.source }}"></script>
+  <script src="{% static 'js/manga-source.js' %}"
+          data-source="{{ request.GET.source }}"></script>
 {% endblock js %}
diff --git a/src/templates/app/season_details.html b/src/templates/app/season_details.html
@@ -39,18 +39,15 @@
       </div>
 
       {% for episode in season.episodes %}
-        <div class="card mb-3">
+        <div class="card episode-card mb-3">
           <div class="row g-0">
 
-            {% if episode.image == IMG_NONE %}
-              <div class="col-md-4 episode-img-none"></div>
-            {% else %}
-              <div class="col-md-4">
-                <img src="{{ episode.image }}"
-                     class="w-100 h-100 object-fit-cover rounded-start"
-                     alt="E{{ episode.episode_number }}">
-              </div>
-            {% endif %}
+            <div class="col-md-4">
+              <img src="{{ IMG_NONE }}"
+                    data-src="{{ episode.image }}"
+                    class="lazyload {% if episode.image == IMG_NONE %}episode-img-none{% else %}episode-img{% endif %}"
+                    alt="E{{ episode.episode_number }}">
+            </div>
 
             <div class="col-md-8 card-body d-flex flex-column align-items-start pb-2">
 

diff --git a/src/templates/app/statistics.html b/src/templates/app/statistics.html
@@ -35,8 +35,10 @@ <h5 class="card-title mb-3">Select Date Range</h5>
               <option value="last90Days" {% if range == "last90Days" %}selected{% endif %}>Last 90 days</option>
               <hr>
               <option value="thisYear" {% if range == "thisYear" %}selected{% endif %}>This year</option>
-              <option value="last6Months" {% if range == "last6Months" %}selected{% endif %}>Last 6 months</option>
-              <option value="last12Months" {% if range == "last12Months" %}selected{% endif %}>Last 12 months</option>
+              <option value="last6Months"
+                      {% if range == "last6Months" %}selected{% endif %}>Last 6 months</option>
+              <option value="last12Months"
+                      {% if range == "last12Months" %}selected{% endif %}>Last 12 months</option>
               <hr>
               <option value="allTime" {% if range == "allTime" %}selected{% endif %}>All time</option>
               <option value="custom" {% if range == "custom" %}selected{% endif %}>Custom range</option>
@@ -254,9 +256,12 @@ <h5 class="card-title mb-3 text-center">Highest Rated Media</h5>
             {% for media in score_distribution.top_rated %}
               <div class="col-2">
                 <div class="card media-card">
-                  <img src="{{ media.image }}"
-                       class="card-img {% if media.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
-                       alt="{{ media.title }}" />
+                  <a href="{{ media.url }}">
+                    <img src="{{ IMG_NONE }}"
+                         data-src="{{ media.image }}"
+                         class="card-img lazyload {% if media.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
+                         alt="{{ media.title }}" />
+                  </a>
 
                   <div class="card-img-overlay">
                     <div class="card-title">{{ media.score }}</div>

diff --git a/src/templates/base.html b/src/templates/base.html
@@ -242,6 +242,7 @@
       </div>
       <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
       <script src="{% static 'js/htmx.min.js' %}"></script>
+      <script src="{% static "js/lazysizes.min.js" %}" async=""></script>
       {% block js %}
       {% endblock js %}
     {% endblock body %}

diff --git a/src/templates/lists/list_detail.html b/src/templates/lists/list_detail.html
@@ -89,8 +89,8 @@ <h1 class="modal-title fs-5">Edit {{ custom_list }}</h1>
       {% for item in items.all %}
         <div class="card media-card">
           <a href="{{ item.url }}">
-            <img src="{{ item.image }}"
-                class="card-img {% if item.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
+            <img src="{{ IMG_NONE }}" data-src="{{ item.image }}"
+                class="card-img lazyload {% if item.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
                 alt="{{ item.title }}" />
           </a>