Update templates to use srcset

gallery/models/album.py

@@ -22,13 +22,18 @@ class Album(models.Model):
     def photos_in_album(self):
         return self.photos.count()
     
+    @property
+    def photos_views(self):
+        total_views = sum(self.photos.views())
+        return total_views
+    
     @property
     def cover_url(self):
         if self.cover:
-            return self.cover.photo.url
+            return self.cover.photo_md.url
         random_cover = self.photos.order_by('-width').first()
         if random_cover:
-            return random_cover.photo.url
+            return random_cover.photo_md.url
         return static('img/placeholder.png')
     
     def clean(self):

gallery/templates/gallery/album_detail.html

@@ -1,4 +1,6 @@
 {% extends "base.html" %}
+{% load static %}
+
 
 <!-- Title -->
 {% block title %} Gallery : Albums : {{ album.name }} {% endblock %}
@@ -9,19 +11,48 @@
     <li>{{ album.name }}</li>
 {% endblock %}
 
+
+{% block parallax %}
+{% if album.cover %}
+<div class="uk-inline uk-height-medium uk-background-cover uk-light uk-flex" uk-parallax="bgy: -300" style="background-image: url('{{ album.cover.photo_bg.url }}');">
+{% else %}
+<div class="uk-inline uk-height-medium uk-background-cover uk-light uk-flex" uk-parallax="bgy: -300" style="background-image: url('{% static 'img/placeholder.png' %}');">
+{% endif %}
+    <div class="uk-overlay-primary uk-position-cover"></div>
+    <div class="uk-overlay uk-position-center uk-light uk-text-center">
+        <h1 class="uk-text-light">{{ album.name }}</h1>
+        <p class="uk-text-light uk-text-lead">{{ album.location }}</p>
+        <p class="uk-text-lighter">{{ album.album_date|date:"d.m.Y" }} &bull;  {{ album.photos_in_album }} photos </p>
+    </div>
+</div>
+{% endblock %}
+
+
 <!-- Content -->
 {% block content %}
 
 <h1>{{ album.name }}</h1>
 
     <div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l" uk-grid="masonry: true">
-    {% for photo in photos %}
-        <a href="{{ photo.get_absolute_url }}">
-            <img loading="lazy" srcset="{{ photo.photo_bg.url }} 320w, {{ photo.photo_md.url }} 720w, {{ photo.photo_md.url }} 1920w" 
-            src="{{ photo.photo_md.url }}" alt="{{ photo.album.name }} - {{ photo.slug }}">
-        </a>
-    {% endfor %}
+        {% for photo in photos %}
+            <a href="{{ photo.get_absolute_url }}">
+                <img 
+                    loading="lazy" 
+                    src="{{ photo.photo_sm.url }}" 
+                    srcset="
+                        {{ photo.photo_sm.url }} 320w, 
+                        {{ photo.photo_md.url }} 720w, 
+                        {{ photo.photo_bg.url }} 1920w
+                    " 
+                    sizes="(max-width: 640px) 320px, 
+                           (max-width: 960px) 720px, 
+                           1920px" 
+                    alt="{{ photo.album.name }} - {{ photo.slug }}">
+            </a>
+        {% endfor %}
     </div>
+    
+
 
     {% include "./_pagination.html" %}
 

gallery/templates/gallery/album_list.html

@@ -19,7 +19,7 @@
         <div class="uk-card uk-card-default">
             <div class="uk-card-media-top">
                 <a href="{{ album.get_absolute_url }}">
-                <img src="{{ album.cover_url }}" width="1800" height="1200" alt="">
+                <img src="{{ album.cover_url }}" alt="{{ album.name }}">
                 </a>
             </div>
             <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-padding-small">

gallery/templates/gallery/photo_detail.html

@@ -15,10 +15,22 @@
 {% block content %}
 
     <div uk-grid>
+
         <div class="uk-width-1-1 uk-width-3-4@m">
-            <div uk-lightbox >
-                <a href="{{ photo.photo.url }}" data-alt="{{ photo.slug }}">
-                    <img src="{{ photo.photo.url }}" alt="{{ photo.slug }}" class="height='100%'" />
+            <div uk-lightbox>
+                <a href="{{ photo.photo_bg.url }}" data-alt="{{ photo.slug }}">
+                    <img 
+                        src="{{ photo.photo_md.url }}" 
+                        srcset="
+                            {{ photo.photo_sm.url }} 320w, 
+                            {{ photo.photo_md.url }} 720w, 
+                            {{ photo.photo_bg.url }} 1920w
+                        " 
+                        sizes="(max-width: 640px) 320px, 
+                               (max-width: 960px) 720px, 
+                               1920px" 
+                        alt="{{ photo.slug }}" 
+                        style="max-width: 100%; max-height: 100vh; object-fit: contain;" />
                 </a>
             </div>
         </div>

gallery/views.py

@@ -33,9 +33,13 @@ class AlbumDetail(DetailView):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         photos = self.object.photos.all().order_by('taken_at')
+
+        # Pagination
         paginator = Paginator(photos, 30)
         page_number = self.request.GET.get('page')
         page_obj = paginator.get_page(page_number)
+
+        # Return
         context['photos'] = page_obj.object_list
         context['page_obj'] = page_obj
         return context