Optimize templates & clean code

gallery/admin.py

@@ -61,6 +61,7 @@ class LocationAdmin(admin.ModelAdmin):
     search_fields = ('place', 'city__name')
     list_per_page = 30
 
+
 class AlbumAdmin(admin.ModelAdmin):
     prepopulated_fields = {'slug': ('name',)}
     list_display = ('name', 'location', 'album_date', 'is_public', 'upload_link', 'thumbnail')

gallery/context_processors.py

@@ -18,4 +18,3 @@ def site_config(request):
             config = {}
 
     return {'site_config': config}
-

gallery/models/album.py

@@ -65,4 +65,4 @@ class Album(models.Model):
 
 @receiver(post_save, sender=Album)
 def delete_album_cover_cache(sender, instance, **kwargs):
-    cache.delete(f'cover_image_data_{instance.pk}')
+    cache.delete(f'photo_md_image_data_{instance.pk}')

gallery/models/location.py

@@ -20,7 +20,6 @@ class Location(models.Model):
         unique_together = ('place', "city")
         ordering = ['city']
 
-
     def __str__(self):
         if self.place:
             return '{0}, {1}'.format(self.city, self.place)

gallery/models/photo.py

@@ -79,7 +79,6 @@ class Photo(models.Model):
         return f'{self.slug} ({self.orientation}) {self.is_favorite}'
 
 
-
 @receiver(post_save, sender=Photo)
 def handle_photo_creation(sender, instance, created, **kwargs):
     if not created:

gallery/templates/gallery/album_list.html

@@ -30,7 +30,8 @@
                 <!-- Album cover image -->
                 <div class="uk-card-media-top">
                     <a href="{{ album.get_absolute_url }}">
-                    {% with album|cover_image_data as img %}
+                    {% with album.cover|photo_image_data as img %}
+                        <div class="{% if img.is_placeholder %}uk-blur{% endif %}">
                             <img 
                                 src="{{ img.url }}"
                                 width="{{ img.width }}"
@@ -38,7 +39,10 @@
                                 style="aspect-ratio: {{ img.aspect_ratio }};"
                                 alt="Cover image for {{ album.name }}"
                                 title="{{ album.name }}"
-                            loading="lazy">
+                                loading="lazy"
+                                decoding="async"
+                                onload="this.parentElement.classList.remove('uk-blur'); this.classList.add('fade-in');">
+                        </div>
                     {% endwith %}
                     </a>
                 </div>

gallery/templates/gallery/album_search.html

@@ -31,7 +31,8 @@
                     <!-- Album cover image -->
                     <div class="uk-card-media-top">
                         <a href="{{ album.get_absolute_url }}">
-                        {% with album|cover_image_data as img %}
+                        {% with album.cover|photo_image_data as img %}
+                            <div class="{% if img.is_placeholder %}uk-blur{% endif %}">
                                 <img 
                                     src="{{ img.url }}"
                                     width="{{ img.width }}"
@@ -39,7 +40,10 @@
                                     style="aspect-ratio: {{ img.aspect_ratio }};"
                                     alt="Cover image for {{ album.name }}"
                                     title="{{ album.name }}"
-                                loading="lazy">
+                                    loading="lazy"
+                                    decoding="async"
+                                    onload="this.parentElement.classList.remove('uk-blur'); this.classList.add('fade-in');">
+                            </div>
                         {% endwith %}
                         </a>
                     </div>

gallery/templates/gallery/main.html

@@ -15,6 +15,7 @@
 
     <!-- Favorite random portrait photos -->
     {% load top_tags %}
+    {% load image_tags %}
     {% random_favorite_photos_portrait 10 as top_portrait_photos %}
     
     {% if top_portrait_photos %}
@@ -22,11 +23,13 @@
         <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
             <div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
                 {% for photo in top_portrait_photos %}
+                {% with photo|photo_image_data as data %}
                 <div>
                     <a href="{{ photo.get_absolute_url }}">
-                        <img src="{{ photo.photo_md.url }}" alt="{{ photo.album.slug }}" width="400" height="600" style="object-fit: cover;">
+                        <img src="{{ data.url }}" alt="{{ photo.album.slug }}" width="{{ data.width }}" height="{{ data.height }}" style="object-fit: cover;" loading="lazy">
                     </a>
                 </div>
+                {% endwith %}
                 {% endfor %}
             </div>
             <a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
@@ -46,7 +49,8 @@
                 <!-- Album cover image -->
                 <div class="uk-card-media-top">
                     <a href="{{ album.get_absolute_url }}">
-                    {% with album|cover_image_data as img %}
+                    {% with album.cover|photo_image_data as img %}
+                        <div class="{% if img.is_placeholder %}uk-blur{% endif %}">
                             <img 
                                 src="{{ img.url }}"
                                 width="{{ img.width }}"
@@ -54,7 +58,10 @@
                                 style="aspect-ratio: {{ img.aspect_ratio }};"
                                 alt="Cover image for {{ album.name }}"
                                 title="{{ album.name }}"
-                            loading="lazy">
+                                loading="lazy"
+                                decoding="async"
+                                onload="this.parentElement.classList.remove('uk-blur'); this.classList.add('fade-in');">
+                        </div>
                     {% endwith %}
                     </a>
                 </div>

gallery/templatetags/image_tags.py

@@ -6,24 +6,36 @@ from django.templatetags.static import static
 
 register = template.Library()
 
-@register.filter
-def cover_image_data(album):
 
-    cache_key = f'cover_image_data_{album.pk}'
+@register.filter
+def photo_image_data(photo):
+    """
+    Generate resized image data for Photo objects.
+    """
+    if not photo:
+        return {
+            "url": static("img/placeholder.png"),
+            "width": 1200,
+            "height": 800,
+            "aspect_ratio": round(1200 / 800, 3),
+            "is_placeholder": True,
+        }
+
+    cache_key = f'photo_md_image_data_{photo.pk}'
     data = cache.get(cache_key)
 
     if data:
         return data
 
-    photo = getattr(album, "cover", None)
     max_w, max_h = 720, 720
 
-    if not photo or not photo.width or not photo.height:
+    if not photo.width or not photo.height:
         data = {
             "url": static("img/placeholder.png"),
             "width": 1200,
             "height": 800,
             "aspect_ratio": round(1200 / 800, 3),
+            "is_placeholder": True,
         }
     else:
         aspect = photo.aspect_ratio
@@ -39,6 +51,7 @@ def cover_image_data(album):
             "width": w,
             "height": h,
             "aspect_ratio": round(aspect, 3),
+            "is_placeholder": False,
         }
 
     cache.set(cache_key, data, 60 * 60 * 24)

static/css/muistox.css

@@ -2,7 +2,9 @@ body {
 	font: 400 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
+.uk-navbar-item,
+.uk-navbar-nav>li>a,
+.uk-navbar-toggle {
 	min-height: 50px;
 }
 
@@ -14,3 +16,25 @@ body {
 .uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before {
 	margin: 0 10px 0 calc(10px - 4px);
 }
+
+.uk-blur img {
+	filter: blur(8px);
+	transform: scale(1.05);
+	transition: filter 0.5s ease, transform 0.5s ease;
+}
+
+.fade-in {
+	animation: fadeIn 0.8s ease forwards;
+}
+
+@keyframes fadeIn {
+	0% {
+		opacity: 0;
+		transform: scale(1.02);
+	}
+
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+}