Implement image galleries

content/about/index.md

@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 eleventyNavigation:
   key: About
-  order: 3
+  order: 2
 ---
 <article>
 <h1>About me and my website.</h1>

content/blog.njk

@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 eleventyNavigation:
   key: Blog
-  order: 2
+  order: 3
 ---
 <h1>Nathan’s Blog.</h1>
 

content/feeds.njk

@@ -8,6 +8,8 @@ pagination:
     - post
     - posts
     - tagList
+    - gallery
+    - galleryImages
   addAllPagesToCollections: true
 eleventyComputed:
   title: “{{ tag }}”

content/galleries.njk

@@ -0,0 +1,24 @@
+---
+pagination:
+  data: galleries
+  size: 1
+  alias: gallery
+layout: layouts/base.njk
+tags: gallery
+structuredData: none
+eleventyComputed:
+  title: "{{ gallery.title }}"
+	permalink: "/gallery/{{ gallery.title | slugify }}/"
+	description: "{{ gallery.description }}"
+---
+<h1>{{ gallery.title }}</h1>
+<p class="page-block nodropcap">{{ gallery.description }}</p>
+<section class="gallery-images">
+	{% for picture in gallery.pictures %}
+	<a href="/gallery/{{ gallery.title | slugify }}/{{ picture.filename | slugify }}/">
+		<wc-card class="gallery-image-container">
+			<img alt="{{ gallery.thumbAltText }}" class="gallery-image" src="{{ gallery.url }}{{ picture.filename }}">
+		</wc-card>
+	</a>
+	{% endfor %}
+</section>

content/galleries/index.njk

@@ -0,0 +1,32 @@
+---
+layout: layouts/base.njk
+eleventyNavigation:
+  key: Pics
+  order: 4
+---
+<h1>Image Galleries</h1>
+<p class="page-block nodropcap">
+Some pictures I thought would be worth posting.
+</p>
+<section class="postlist">
+<div class="postlist-item-container">
+	{% for gallery in galleries %}
+	<article class="postlist-item">
+		<a href="../gallery/{{ gallery.title | slugify }}" class="postlist-link">
+			<div class="post-image-container">
+				<img class="post-image" {% if gallery.galleryImage %} src="{{ gallery.url }}{{ gallery.galleryImage }}" alt="{{ gallery.galleryImageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
+			</div>
+		</a>
+		<div class="post-copy">
+			<a href="../gallery/{{ gallery.title | slugify }}" class="postlist-link">
+				<h3>
+					{{ gallery.title }}
+				</h3>
+			</a>
+			<time class="postlist-date" datetime="{{ gallery.date }}">{{ gallery.date | readableDate("LLLL yyyy") }}</time>
+			<p>{{ gallery.synopsis | truncate(105) | safe }}</p>
+		</div>
+	</article>
+	{% endfor %}
+</div>
+</section>

content/galleryImage.njk

@@ -0,0 +1,40 @@
+---
+pagination:
+  data: collections.galleryImages
+  size: 1
+  alias: picture
+layout: layouts/base.njk
+structuredData: none
+eleventyComputed:
+  title: "Image: {{ picture.title }}"
+	permalink: "/gallery/{{ picture.containingGallery | slugify }}/{{ picture.filename | slugify }}/"
+	description: "{{ picture.title }} from gallery: {{ picture.containingGallery}}"
+---
+<article>
+	<h1>{{ picture.title }}</h1>
+	<div class="buttonContainer">
+		{% if picture.previousImage %}
+		<a href="../{{ picture.previousImage | slugify }}">
+			<button type="button">🡠 Previous</button>
+		</a>
+		{% endif %}
+		<a href="/gallery/{{ picture.containingGallery | slugify }}/">
+			<button type="button">Gallery</button>
+		</a>
+		{% if picture.nextImage %}
+		<a href="../{{ picture.nextImage | slugify }}">
+			<button type="button">Next 🡢</button>
+		</a>
+		{% endif %}
+	</div>
+	<figure>
+		<a href="{{ picture.baseUrl }}/{{ picture.filename }}">
+			<img src="{{ picture.baseUrl }}/{{ picture.filename }}" alt="{{ picture.altText }}">
+		</a>
+		{% if picture.caption %}
+		<figcaption>
+			{{ picture.caption }}
+		</figcaption>
+		{% endif %}
+	</figure>
+</article>

content/now.njk

@@ -1,8 +1,5 @@
 ---
 layout: layouts/base.njk
-eleventyNavigation:
-  key: Now
-  order: 4
 ---
 <article class="post">
 <h1>Now: What’s Been Going on Lately?</h1>

content/sitemap/index.njk

@@ -17,6 +17,7 @@ layout: layouts/base_full_width_text.njk
 			</li>
 			<li><a href="/blog">Blog</a></li>
 			<li><a href="/blogroll">Blogroll</a></li>
+			<li><a href="/galleries">Galleries</a></li>
 			<li><a href="/now">Now</a></li>
 			<li><a href="/tags">Tags</a></li>
 		</ul>