improved Modal with zoom and pagination. also implementing thumbnail generation

app/templates/gallery.html

@@ -1,22 +1,30 @@
 {% extends "layout.html" %}
-
 {% block title %}Gallery{% endblock %}
 
 {% block content %}
-<!-- Gallery Thumbnail Grid -->
+<h1 style="text-align:center; margin-top: 1rem;">Gallery</h1>
+
+<!-- Pagination Controls (Top) -->
+{% include '_pagination.html' %}
+
+<!-- Gallery Grid -->
 <div class="gallery-grid">
-  {% for image in images %}
+  {% for image in images.items %}
   <div class="gallery-item">
     <div class="gallery-thumb img-clickable"
-        data-full="{{ url_for('main.serve_image', filename=image.filepath | replace('/images/', '')) }}"
-        style="background-image: url('{{ url_for('main.serve_image', filename=image.filepath | replace('/images/', '')) }}');"
+        data-full="{{ url_for('main.serve_image', filename=image.filepath | replace('/images/', '') ) }}"
+        style="background-image: url('{{ url_for('main.serve_image', filename=image.filepath | replace('/images/', '') ) }}');"
         data-filename="{{ image.filename }}">
     </div>
     <a href="{{ url_for('main.artist_gallery', artist_name=image.artist) }}">{{ image.artist }}</a>
     <span class="image-date">
-        {{ (image.taken_at or image.imported_at) | datetimeformat }}
+        {{ image.taken_at or image.imported_at | datetimeformat }}
     </span>
   </div>
   {% endfor %}
 </div>
+
+<!-- Pagination Controls (Bottom) -->
+{% include '_pagination.html' %}
+
 {% endblock %}