Portfolio image captions and dates

content/layouts/base.njk

@@ -73,6 +73,8 @@
 			new SimpleLightbox('.gallery a', {
 				widthRatio: 0.9,
 				heightRatio: 0.95,
+				captionSelector: '.gallery-caption',
+				captionType: 'text',
 			});
 		</script>
 	</body>

content/layouts/portfolio.njk

@@ -13,7 +13,16 @@ layout: base.njk
 	</div>
 	<div class="portfolio-detail-images gallery">
 		{% for image in data.images %}
-		<a href="{% imageUrl image %}"><img src="{{image}}" alt="" loading="lazy" /></a>
+		<a href="{% imageUrl image.url %}">
+			<img src="{{image.url}}" alt="" loading="lazy" />
+			{% if image.caption %}
+			<div class="gallery-caption">
+				{{image.caption}}
+				<small class="d-inline-block"> - {{image.date | dateLocale}}</small>
+			</div>
+
+			{% endif %}
+		</a>
 		{% endfor %}
 	</div>
 

content/pages/portfolio.njk

@@ -14,7 +14,7 @@ permalink: "/portfolio/"
 	<a href="{{portfolioItem.data.page.url | safe}}">
 		<div class="flex">
 			{% for image in portfolioItem.data.images.slice(0,3) %}
-			<img src={{image}} alt="" width="400" />
+			<img src={{image.url}} alt="" width="400" />
 			{% endfor %}
 		</div>
 	</a>

content/portfolio/portfolio.11tydata.js

@@ -1,17 +1,31 @@
 import * as path from 'node:path';
 import * as fs from 'node:fs';
+import exifr from 'exifr';
 
 const conf = {
 	tags: "portfolio",
 	layout: "portfolio.njk",
 	eleventyComputed: {
-		images(data) {
+		async images(data) {
 			const dir = path.dirname(data.page.inputPath);
 
-			const images = fs.readdirSync(dir)
+			const files = fs.readdirSync(dir)
 				.filter(file => ['.png', '.jpg', '.jpeg', '.JPG'].includes(path.extname(file)))
-				.sort()
+				.sort();
-				.map(image => `${data.page.url}${image}`);
+
+
+			const images = await Promise.all(files.map(async (image) => {
+
+				const imagePath = path.resolve(dir + '/' + image);
+				const exif = await exifr.parse(imagePath, { pick: ['XPComment', 'DateTimeOriginal'] });
+
+				return {
+					url: data.page.url + image,
+					caption: exif?.XPComment ?? "",
+					date: exif?.DateTimeOriginal
+				};
+
+			}));
 
 			return images;
 		},

content/style.scss

@@ -214,7 +214,7 @@ body {
 		}
 	}
 
-	figure {
+	figure.styled-figure {
 		background-color: $grey-dark;
 		display: inline-block;
 		padding: 0.5rem;
@@ -348,14 +348,24 @@ body {
 
 .gallery a {
 	display: inline-block;
+	position: relative;
 	overflow: hidden;
 
 	img {
-
 		transition: transform 0.3s;
 
 		&:hover {
 			transform: scale(1.1);
 		}
 	}
+
+	.gallery-caption {
+		color: $text-default;
+		position: absolute;
+		bottom: 0px;
+		background-color: #00000088;
+		width: 100%;
+		padding: 0.3rem 0.4rem;
+	}
+
 }

eleventy.config.js

@@ -8,7 +8,7 @@ import cacheBuster from 'eleventy-auto-cache-buster';
 export default async function (eleventyConfig) {
 	// Filters
 	eleventyConfig.addFilter("dateLocale", function (value) {
-		return DateTime.fromISO(new Date(value).toISOString()).toLocaleString({
+		return DateTime.fromJSDate(new Date(value)).toLocaleString({
 			year: 'numeric',
 			month: 'short',
 			day: '2-digit',
@@ -35,7 +35,7 @@ export default async function (eleventyConfig) {
 	});
 	eleventyConfig.addShortcode("figure", (url, alt, caption, width) => {
 		return `
-		<figure>
+		<figure class="styled-figure">
 			<img src="${url}" alt="${alt}" width="${width || "700"}" />
 			<figcaption>${caption}</figcaption>
 		</figure>
@@ -75,6 +75,8 @@ export default async function (eleventyConfig) {
 		return sorted;
 	});
 
+	eleventyConfig.addWatchTarget("content/portfolio/**/*");
+
 }
 
 export const config = {

package-lock.json

@@ -12,6 +12,7 @@
         "@11ty/eleventy": "^3.0.0",
         "@11ty/eleventy-img": "^6.0.1",
         "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+        "exifr": "^7.1.3",
         "luxon": "^3.5.0",
         "sass": "^1.83.4"
       },
@@ -1703,6 +1704,12 @@
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "license": "MIT"
     },
+    "node_modules/exifr": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/exifr/-/exifr-7.1.3.tgz",
+      "integrity": "sha512-g/aje2noHivrRSLbAUtBPWFbxKdKhgj/xr1vATDdUXPOFYJlQ62Ft0oy+72V6XLIpDJfHs6gXLbBLAolqOXYRw==",
+      "license": "MIT"
+    },
     "node_modules/extend-shallow": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",

package.json

@@ -16,6 +16,7 @@
     "@11ty/eleventy": "^3.0.0",
     "@11ty/eleventy-img": "^6.0.1",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+    "exifr": "^7.1.3",
     "luxon": "^3.5.0",
     "sass": "^1.83.4"
   },