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()
-				.map(image => `${data.page.url}${image}`);
+				.sort();
+
+
+			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;
+	}
+
 }