page load optimization and pagination changes

app/templates/_gallery_grid.html

@@ -0,0 +1,36 @@
+<!-- /app/templates/_gallery_grid.html -->
+<div class="gallery-grid">
+  {% 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.thumb_path or 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 }}</span>
+    </div>
+  {% endfor %}
+</div>
+
+<!-- Modal -->
+<div id="imageModal" class="modal">
+  <div class="modal-content">
+    <!-- Navigation buttons -->
+    <button id="modalPrev" class="modal-button modal-prev">←</button>
+    <button id="modalNext" class="modal-button modal-next">→</button>
+
+    <div class="modal-body">
+      <div id="modalImageWrapper" class="modal-image-wrapper">
+        <img id="modalImage" src="" alt="Full View">
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="{{ url_for('static', filename='js/modal-pagination.js') }}"></script>
+
+{% if request.args.get('page', '1') == '1' and not request.args.get('per_page') %}
+<script src="{{ url_for('static', filename='js/dynamic_gallery_paging.js') }}"></script>
+{% endif %}
+

app/templates/_pagination.html

@@ -1,3 +1,4 @@
+{% set per_page = request.args.get('per_page') %}
 {% if images.pages > 1 %}
 <div class="pagination-container">
   {% set total_pages = images.pages %}
@@ -5,6 +6,15 @@
   {% set window_size = 7 %}
   {% set endpoint = request.endpoint %}
 
+  {# First and Prev #}
+  {% if images.has_prev %}
+    {% if current_page > 1 %}
+      <a class="pagination-link" href="{{ url_for(endpoint, page=1, per_page=per_page, **request.view_args) }}">« First</a>
+    {% endif %}
+    <a class="pagination-link" href="{{ url_for(endpoint, page=images.prev_num, per_page=per_page, **request.view_args) }}">← Previous</a>
+  {% endif %}
+
+  {# Page window logic #}
   {% if total_pages <= window_size %}
     {% set start_page = 1 %}
     {% set end_page = total_pages %}
@@ -19,17 +29,9 @@
     {% set end_page = current_page + 3 %}
   {% endif %}
 
-  {# First and Prev #}
-  {% if images.has_prev %}
-    {% if current_page > 1 %}
-      <a class="pagination-link" href="{{ url_for(endpoint, page=1, **request.view_args) }}">« First</a>
-    {% endif %}
-    <a class="pagination-link" href="{{ url_for(endpoint, page=images.prev_num, **request.view_args) }}">← Previous</a>
-  {% endif %}
-
   {# Left ellipsis #}
   {% if start_page > 1 %}
-    <a class="pagination-link" href="{{ url_for(endpoint, page=1, **request.view_args) }}">1</a>
+    <a class="pagination-link" href="{{ url_for(endpoint, page=1, per_page=per_page, **request.view_args) }}">1</a>
     {% if start_page > 2 %}
       <span class="pagination-ellipsis">…</span>
     {% endif %}
@@ -37,7 +39,7 @@
 
   {# Page numbers #}
   {% for p in range(start_page, end_page + 1) %}
-    <a class="pagination-link {% if p == current_page %}active{% endif %}" href="{{ url_for(endpoint, page=p, **request.view_args) }}">{{ p }}</a>
+    <a class="pagination-link {% if p == current_page %}active{% endif %}" href="{{ url_for(endpoint, page=p, per_page=per_page, **request.view_args) }}">{{ p }}</a>
   {% endfor %}
 
   {# Right ellipsis #}
@@ -45,14 +47,14 @@
     {% if end_page < total_pages - 1 %}
       <span class="pagination-ellipsis">…</span>
     {% endif %}
-    <a class="pagination-link" href="{{ url_for(endpoint, page=total_pages, **request.view_args) }}">{{ total_pages }}</a>
+    <a class="pagination-link" href="{{ url_for(endpoint, page=total_pages, per_page=per_page, **request.view_args) }}">{{ total_pages }}</a>
   {% endif %}
 
   {# Next and Last #}
   {% if images.has_next %}
-    <a class="pagination-link" href="{{ url_for(endpoint, page=images.next_num, **request.view_args) }}">Next →</a>
+    <a class="pagination-link" href="{{ url_for(endpoint, page=images.next_num, per_page=per_page, **request.view_args) }}">Next →</a>
     {% if current_page < total_pages %}
-      <a class="pagination-link" href="{{ url_for(endpoint, page=total_pages, **request.view_args) }}">Last »</a>
+      <a class="pagination-link" href="{{ url_for(endpoint, page=total_pages, per_page=per_page, **request.view_args) }}">Last »</a>
     {% endif %}
   {% endif %}
 </div>

app/templates/artist_gallery.html

@@ -1,3 +1,4 @@
+<!-- /app/templates/artist_gallery.html -->
 {% extends "layout.html" %}
 {% block title %}{{ artist }}'s Gallery{% endblock %}
 
@@ -7,21 +8,8 @@
   <!-- Pagination Controls -->
 {% include '_pagination.html' %}
 
-  <div class="gallery-grid">
-    {% for image in images %}
-    <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.thumb_path or 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 }}
-      </span>
-    </div>
-    {% endfor %}
-  </div>
+<!-- Gallery Grid -->
+{% include '_gallery_grid.html' %}
 
   <!-- Pagination Controls -->
 {% include '_pagination.html' %}

app/templates/gallery.html

@@ -1,3 +1,4 @@
+<!-- /app/templates/gallery.html -->
 {% extends "layout.html" %}
 {% block title %}Gallery{% endblock %}
 
@@ -8,21 +9,7 @@
 {% include '_pagination.html' %}
 
 <!-- Gallery Grid -->
-<div class="gallery-grid">
-  {% 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-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 }}
-    </span>
-  </div>
-  {% endfor %}
-</div>
+{% include '_gallery_grid.html' %}
 
 <!-- Pagination Controls (Bottom) -->
 {% include '_pagination.html' %}

app/templates/layout.html

@@ -56,23 +56,5 @@
   <input type="hidden" id="prevPageUrl" value="{{ prev_page_url }}">
 {% endif %}
 
-
-<!-- Modal -->
-<div id="imageModal" class="modal">
-  <div class="modal-content">
-    <!-- Navigation buttons -->
-    <button id="modalPrev" class="modal-button modal-prev">←</button>
-    <button id="modalNext" class="modal-button modal-next">→</button>
-
-    <div class="modal-body">
-      <div id="modalImageWrapper" class="modal-image-wrapper">
-        <img id="modalImage" src="" alt="Full View">
-      </div>
-    </div>
-  </div>
-</div>
-
-<script src="{{ url_for('static', filename='js/modal-pagination.js') }}"></script>
-
 </body>
 </html>