Add exif info as an option

Author: bep

README.md

@@ -44,7 +44,11 @@ Also See the annotated [index.html](exampleSite/layouts/index.html) for a brief
         shuffle = false
 
         # Reverse the order of the images in the gallery.
-        reverse = true
+        reverse = false
+
+         # Enable Exif data in the gallery.
+         # See https://gohugo.io/content-management/image-processing/#exif-data for how to filter tags.
+        enable_exif = false
 ```
 
 

assets/css/gallerydeluxe/styles.css

@@ -48,6 +48,43 @@
   opacity: 0;
 }
 
+.gd-modal-exif {
+  position: absolute;
+  z-index: 20;
+  bottom: 10px;
+  right: 10px;
+  color: #fff;
+  background-color: #8a8a8a;
+  padding: 0.75rem;
+  opacity: 0.75;
+  filter: drop-shadow(-1px -1px 2px #ccc);
+}
+
+.gd-modal-exif-ontimeout {
+  transition: opacity 2s ease-out;
+  opacity: 0;
+}
+
+.gd-modal-exif:hover {
+  opacity: 1;
+  cursor: pointer;
+}
+
+.gd-modal-exif dl dd {
+  display: inline;
+  margin: 0;
+}
+
+.gd-modal-exif dl dd:after {
+  display: block;
+  content: "";
+}
+
+.gd-modal-exif dl dt {
+  display: inline-block;
+  min-width: 100px;
+}
+
 .gd-modal-close {
   position: absolute;
   z-index: 20;

assets/js/gallerydeluxe/src/index.js

@@ -111,6 +111,40 @@ let GalleryDeluxe = {
 			if (activeImage) {
 				let modal = document.getElementById('gd-modal');
 
+				if (params.enable_exif) {
+					let exif = document.getElementById('gd-modal-exif');
+					const onTimeOutClass = 'gd-modal-exif-ontimeout';
+					exif.classList.remove(onTimeOutClass);
+					let child = exif.lastElementChild;
+					while (child) {
+						exif.removeChild(child);
+						child = exif.lastElementChild;
+					}
+					let dl = document.createElement('dl');
+					exif.appendChild(dl);
+
+					const addTag = (tag, value) => {
+						let dt = document.createElement('dt');
+						dt.innerText = camelToTitle(tag);
+						dl.appendChild(dt);
+						let dd = document.createElement('dd');
+						dd.innerText = value;
+						dl.appendChild(dd);
+					};
+
+					let date = new Date(activeImage.exif.Date);
+					var dateString = new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().split('T')[0];
+					addTag('Date', dateString);
+					let tags = activeImage.exif.Tags;
+					for (const tag in tags) {
+						addTag(tag, tags[tag]);
+					}
+
+					setTimeout(() => {
+						exif.classList.add(onTimeOutClass);
+					}, 1000);
+				}
+
 				let thumbnail = new Image();
 				thumbnail.classList.add('gd-modal-content');
 				thumbnail.width = activeImage.width;
@@ -208,4 +242,10 @@ let GalleryDeluxe = {
 	},
 };
 
+function camelToTitle(text) {
+	return text.replace(/([A-Z])/g, ' $1').replace(/^./, function (str) {
+		return str.toUpperCase();
+	});
+}
+
 export default GalleryDeluxe;

exampleSite/assets/css/styles.css

@@ -4,6 +4,9 @@ body {
   margin: 0;
   padding: 0;
   background-color: #101010;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 14px;
 }
 
 .logo {

exampleSite/config.toml

@@ -10,6 +10,10 @@ disableKinds = ["section", "taxonomy", "term"]
         # Reverse the order of the images in the gallery.
         reverse = true
 
+        # Enable Exif data in the gallery.
+        # See https://gohugo.io/content-management/image-processing/#exif-data for how to filter tags.
+        enable_exif = true
+
 [caches]
     [caches.images]
         dir    = ':cacheDir/gallerydeluxe'
@@ -19,6 +23,10 @@ disableKinds = ["section", "taxonomy", "term"]
     resampleFilter = "CatmullRom"
     quality        = 71
     anchor         = "smart"
+    [imaging.exif]
+        disableDate    = false
+        disableLatLong = true
+        includeFields  = 'Artist|LensModel|FNumber|ExposureTime'
 
 [server]
     [[server.headers]]

exampleSite/layouts/index.html

@@ -16,12 +16,16 @@
 
   {{/* 'images' is a path to a leaf bundle with a index.md file and lots of JPG images. */}}
   {{ $gallery := partial "gallerydeluxe/init.html" (dict "sourcePath" "images") }}
+  {{ $params := site.Params.gallerydeluxe }}
   {{/* We currently only support 1 gallery per page, which is create4 by an element with id 'gallerydeluxe',
     and a valid data url.
   */}}
   <body id="gallerydeluxe" data-gd-image-data-url="{{ $gallery.imageDataUrl }}">
     <div id="gd-modal" class="gd-modal">
       <span id="gd-modal-close" class="gd-modal-close">&times;</span>
+      {{ if $params.enable_exif }}
+        <div id="gd-modal-exif" class="gd-modal-exif"></div>
+      {{ end }}
     </div>
   </body>
 </html>

layouts/partials/gallerydeluxe/init.html

@@ -2,19 +2,35 @@
 {{ $gallery := site.GetPage $sourcePath }}
 {{ $imageDataUrl := "" }}
 {{ $s := slice }}
+{{ $params := site.Params.gallerydeluxe }}
 {{ with $gallery }}
   {{ $images := $gallery.Resources.Match "**.jpg" }}
   {{ range $images }}
     {{ $thumbs := partial "gallerydeluxe/create-thumbs.html" . }}
     {{ $20 := (index $thumbs "20") }}
     {{ $colors := slice }}
+    {{ $exif := dict }}
+    {{ if $params.enable_exif }}
+      {{/* Workaround for https://github.com/gohugoio/hugo/issues/10345 */}}
+      {{ $tags := newScratch }}
+      {{ range $k, $v := .Exif.Tags }}
+        {{ $tags.Set $k $v }}
+      {{ end }}
+      {{ $exif = dict
+        "Tags" $tags.Values
+        "Date" .Exif.Date
+        "Lat" .Exif.Lat
+        "Long" .Exif.Long
+      }}
+    {{ end }}
     {{ if (ge hugo.Version "0.104") }}
       {{/* .Colors method was added in Hugo 0.104.0 */}}
       {{ $colors = $20.Colors }}
     {{ end }}
     {{ $m :=  dict
       "name" .Name
       "full" .RelPermalink
+      "exif"  $exif
       "width" .Width
       "height" .Height
       "colors" $colors