Update templates

gallery/templates/gallery/_pagination.html

@@ -0,0 +1,39 @@
+{% if page_obj.has_other_pages %}
+    <ul class="uk-pagination uk-flex-center" uk-margin>
+    
+        {% if page_obj.has_previous %}
+          <li><a href="?page={{ page_obj.previous_page_number }}"><span uk-pagination-previous></span></a></li>
+        {% else %}
+          <li class="uk-disabled"><span uk-pagination-previous></span></li>
+        {% endif %}
+      
+        {% if page_obj.number|add:'-3' > 1 %}
+          <li><a href="?page=1">1</a></li>
+          {% if page_obj.number|add:'-4' > 1  %}
+          <li><a href="?page={{ page_obj.number|add:'-4' }}">&hellip;</a></li>
+          {% endif %}
+        {% endif %}
+      
+        {% for i in page_obj.paginator.page_range %}
+          {% if page_obj.number == i %}
+            <li class="uk-active"><span>{{ i }}</span></li>
+          {% elif i > page_obj.number|add:'-4' and i < page_obj.number|add:'4' %}
+            <li><a href="?page={{ i }}">{{ i }}</a></li>
+          {% endif %}
+        {% endfor %}
+      
+        {% if page_obj.paginator.num_pages > page_obj.number|add:'3' %}
+          {% if page_obj.number|add:'4' < page_obj.paginator.num_pages  %}
+          <li><a href="?page={{ page_obj.number|add:'4' }}">&hellip;</a></li>
+          {% endif %}
+          <li><a href="?page={{ page_obj.paginator.num_pages }}">{{ page_obj.paginator.num_pages }}</a></li>
+        {% endif %}
+      
+        {% if page_obj.has_next %}
+          <li><a href="?page={{ page_obj.next_page_number }}"><span uk-pagination-next></span></a></li>
+        {% else %}
+          <li class="uk-disabled"><span uk-pagination-next></span></li>
+        {% endif %}
+      
+    </ul>
+{% endif %}

gallery/templates/gallery/album_detail.html

@@ -13,8 +13,16 @@
 {% block content %}
 
 <h1>{{ album.name }}</h1>
-{% for photo in photos %}
-    <a href="{{ photo.get_absolute_url }}"> {{ photo.slug }} </a>
-{% endfor %}
+
+    <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 %}
+    </div>
+
+    {% include "./_pagination.html" %}
 
 {% endblock %}

gallery/templates/gallery/album_list.html

@@ -10,13 +10,28 @@
 
 <!-- Content -->
 {% block content %}
-<ul>
+
+
+<div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="masonry: true">
     {% for album in album_list %}
-
-        <li>
-            <a href="{{ album.get_absolute_url }}"> {{ album.name }} </a>  - {{ album.album_date|date:"d.m.Y" }} 
-        </li>
-
+    <div>
+        <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="">
+                </a>
+            </div>
+            <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-padding-small">
+                <h3 class="uk-card-title"><a href="{{ album.get_absolute_url }}">{{ album }}</a></h3>
+                <p>{{ album.album_date|date:"d.m.Y" }} &bull; {{ album.photos_in_album }} photos</p>
+            </div>
+        </div>
+    </div>
     {% endfor %}
-</ul>
+    </div>
+
+
+{% include "./_pagination.html" %}
+
+
 {% endblock %}

gallery/templates/gallery/main.html

@@ -6,4 +6,7 @@
 <!-- Content -->
 {% block content %}
     Hello World!
+
+    <p>Istunto vanhenee: {{ session_expiry|date:"d.m.Y H:i" }}</p>
+
 {% endblock %}

gallery/templates/gallery/photo_detail.html

@@ -15,5 +15,6 @@
 {% block content %}
 
     <h1>{{ photo.slug }}</h1>
+    <img src="{{ photo.photo.url }}" alt="{{ photo.slug }}" class="height='100%'" />
 
 {% endblock %}

gallery/templates/gallery/photo_list.html

@@ -10,7 +10,17 @@
 
 <!-- Content -->
 {% block content %}
+
+    <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 object_list %}
-        <a href="{{ photo.get_absolute_url }}">{{ photo.slug }}</a>
+        <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 %}
-{% endblock %}
+    </div>
+
+    {% include "./_pagination.html" %}
+
+{% endblock %}
+