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>