Switch to gallery view

Author: banesullivan

project/example/core/templates/core/imagefile_list.html

@@ -1,9 +1,29 @@
 <h1>Image Files</h1>
-<a href="{% url 's3-image-list' %}">S3 Images</a>
-<ul>
+<br />
+
 {% for object in object_list %}
-    <li>Image {{ object.pk }}: <a href="{% url 'image-file-detail' object.pk %}">CesiumJS</a> or <a href="{% url 'image-file-viewer' object.pk %}">GeoJS</a></li>
-{% empty %}
-    <li>No images yet.</li>
+<figure>
+  <a href="{% url 'image-file-viewer' object.pk %}"><img id="{{ object.pk }}-thumbnail" src="{% url 'image-file-thumbnail' object.pk %}" alt="thumbnail" style="height: 150px" /><a />
+    <figcaption>Image {{ object.pk }}: <a href="{% url 'image-file-detail' object.pk %}">CesiumJS</a> or <a href="{% url 'image-file-viewer' object.pk %}">GeoJS</a></figcaption>
+</figure>
 {% endfor %}
-</ul>
+
+<div class="pagination">
+  <span class="step-links">
+    {% if page_obj.has_previous %}
+    <a href="?page=1">&laquo; first</a>
+    <a href="?page={{ page_obj.previous_page_number }}">previous</a>
+    {% endif %}
+
+    <span class="current">
+      Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
+    </span>
+
+    {% if page_obj.has_next %}
+    <a href="?page={{ page_obj.next_page_number }}">next</a>
+    <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
+    {% endif %}
+  </span>
+</div>
+<br />
+<a href="{% url 's3-image-list' %}">Go to S3 Images</a>

project/example/core/templates/core/s3imagefile_list.html

@@ -1,9 +1,29 @@
 <h1>S3 Image Files</h1>
-<a href="{% url 'image-list' %}">Standard Images</a>
-<ul>
+<br />
+
 {% for object in object_list %}
-    <li>Image {{ object.pk }}: <a href="{% url 's3-image-file-detail' object.pk %}">CesiumJS</a> or <a href="{% url 's3-image-file-viewer' object.pk %}">GeoJS</a></li>
-{% empty %}
-    <li>No images yet.</li>
+<figure>
+  <a href="{% url 's3-image-file-viewer' object.pk %}"><img id="{{ object.pk }}-thumbnail" src="{% url 's3-image-file-thumbnail' object.pk %}" alt="thumbnail" style="height: 150px" /><a />
+    <figcaption>Image {{ object.pk }}: <a href="{% url 's3-image-file-detail' object.pk %}">CesiumJS</a> or <a href="{% url 's3-image-file-viewer' object.pk %}">GeoJS</a></figcaption>
+</figure>
 {% endfor %}
-</ul>
+
+<div class="pagination">
+  <span class="step-links">
+    {% if page_obj.has_previous %}
+    <a href="?page=1">&laquo; first</a>
+    <a href="?page={{ page_obj.previous_page_number }}">previous</a>
+    {% endif %}
+
+    <span class="current">
+      Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
+    </span>
+
+    {% if page_obj.has_next %}
+    <a href="?page={{ page_obj.next_page_number }}">next</a>
+    <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
+    {% endif %}
+  </span>
+</div>
+<br />
+<a href="{% url 'image-list' %}">Go to Images</a>

project/example/core/views.py

@@ -22,7 +22,9 @@ class S3ImageFileViewerView(DetailView):
 
 class ImageFileListView(ListView):
     model = models.ImageFile
+    paginate_by = 20
 
 
 class S3ImageFileListView(ListView):
     model = models.S3ImageFile
+    paginate_by = 20