handle next/prev image in an album

photoalbum/generate.py

@@ -169,7 +169,7 @@ def generate_html(config: Config, root_dir: ImageDirectory) -> None:
                     )
                 )
 
-            for image_path in album_dir.images:
+            for pos, image_path in enumerate(album_dir.images):
                 # TODO: If a file with a matching name but .txt or .md, add that as the
                 # description for the image
                 html_path = image_path.html_path()
@@ -178,12 +178,21 @@ def generate_html(config: Config, root_dir: ImageDirectory) -> None:
                 ) / "static"
                 html_path.parent.mkdir(exist_ok=True)
 
+                prev_image = None
+                next_image = None
+                if pos != 0:
+                    prev_image = album_dir.images[pos-1]
+                if pos < len(album_dir.images) - 1:
+                    next_image = album_dir.images[pos+1]
+
                 logger.debug(f"Rendering {html_path}")
                 with html_path.open("w") as f:
                     f.write(
                         photo_tmpl.render(
                             static_dir=static_path,
                             image_path=image_path,
+                            prev_image=prev_image,
+                            next_image=next_image,
                         )
                     )
 

photoalbum/skel/_templates/album.html

@@ -3,21 +3,23 @@
 {% block content %}
     {% if not album_dir.is_root %}
         <p>
-            <a href="..">up</a>
+            <a href="..">
+                <i class="arrow arrow-up"></i>
+            </a>
         </p>
     {% endif %}
 
     {% if album_dir.children %}
         <h1>Albums</h1>
-        <div id="album-children">
+        <ul id="album-children">
             {% for child in album_dir.children %}
-                <div class="album">
+                <li class="album">
                     <a href="{{child.path.name}}/">
                         {{child.path.name}}
                     </a>
-                </div>
+                </li>
             {% endfor %}
-        </div>
+        </ul>
     {% endif %}
 
     {% if album_dir.images %}

photoalbum/skel/_templates/photo.html

@@ -2,9 +2,25 @@
 
 {% block content %}
 <div id="nav">
-    prev
-    <a href="..">up</a>
-    next
+    <div>
+        {% if prev_image %}
+            <a href="{{prev_image.html_filename()}}">
+                <i class="arrow arrow-left"></i>
+            </a>
+        {% endif %}
+    </div>
+    <div>
+        <a href="..">
+            <i class="arrow arrow-up"></i>
+        </a>
+    </div>
+    <div>
+        {% if next_image %}
+            <a href="{{next_image.html_filename()}}">
+                <i class="arrow arrow-right"></i>
+            </a>
+        {% endif %}
+    </div>
 </div>
 
 <div id="photo">

photoalbum/skel/static/index.css

@@ -4,6 +4,18 @@ body {
 #content {
   width: 1500px;
   text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#content > * {
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ul {
+  padding-left: 1.5em;
 }
 
 #album-photos {
@@ -17,3 +29,36 @@ body {
   display: flex;
   align-items: center;
 }
+
+#nav {
+  width: 150px;
+  margin: auto;
+  display: flex;
+  padding: 0.5em;
+}
+
+#nav div {
+  width: 50px;
+}
+
+.arrow {
+  border: solid black;
+  border-width: 0 3px 3px 0;
+  display: inline-block;
+  padding: 3px;
+}
+
+.arrow-right {
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+
+.arrow-left {
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+}
+
+.arrow-up {
+  transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+}