From 8659835897fe6559dc9396c765b3816077b5806f Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Tue, 21 Sep 2021 13:18:53 -0700
Subject: [PATCH] Add camera and lens metadata to gallery images

---
 gatsby-node.js                              |  5 ++++-
 src/components/GalleryImage/GalleryImage.js | 23 +++++++++++++++++++--
 src/components/GalleryImage/MetadataItem.js |  2 +-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/gatsby-node.js b/gatsby-node.js
index 6aa34e1..dad3106 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -108,7 +108,10 @@ function transformMetaToNodeData(exifData, iptcData, vibrantData, imagePath) {
   const vibrant = vibrantData ? processColors(vibrantData, imagePath) : null;
 
   return {
-    exif: exifData?.exif,
+    exif: {
+      ...exifData?.exif,
+      ...exifData?.image
+    },
     gps,
     dateTaken: exifData?.exif?.DateTimeOriginal,
     iptc: iptcData || undefined,
diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
index e2705d3..36962a1 100644
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -174,13 +174,28 @@ const GalleryImage = ({ data, pageContext }) => {
             <MetadataItem
               aspectRatio={ar}
               data={locationString}
-              icon="location-sharp"
+              icon="location"
               title="location"
             />
+            {(meta.exif.Make || meta.exif.Model) && <MetadataItem
+              aspectRatio={ar}
+              data={[meta.exif.Make, meta.exif.Model].join(' ')}
+              icon="camera"
+              title="camera"
+            />}
+            {(meta.exif.LensModel || meta.exif.FocalLength) && <MetadataItem
+              aspectRatio={ar}
+              data={[
+                meta.exif.LensModel === '----' ? null : meta.exif.LensModel,
+                meta.exif.FocalLength && `${meta.exif.FocalLength}mm`
+              ].filter(Boolean).join(' @')}
+              icon="ellipse"
+              title="lens"
+            />}
             <MetadataItem
               aspectRatio={ar}
               data={shutterSpeed}
-              icon="stopwatch-sharp"
+              icon="stopwatch"
               title="shutter speed"
             />
             {meta.exif.FNumber && <MetadataItem
@@ -239,7 +254,11 @@ export const query = graphql`
               exif {
                 FNumber
                 ExposureTime
+                FocalLength
                 ISO
+                LensModel
+                Make
+                Model
               }
               vibrant {
                 ...VibrantColors
diff --git a/src/components/GalleryImage/MetadataItem.js b/src/components/GalleryImage/MetadataItem.js
index 88ec1da..e24e4f5 100644
--- a/src/components/GalleryImage/MetadataItem.js
+++ b/src/components/GalleryImage/MetadataItem.js
@@ -11,7 +11,7 @@ const MetadataItem = ({ aspectRatio, icon, data, title }) =>
       title={title}
     >
       <span className="icon-offset mr-1">
-        <ion-icon name={icon}></ion-icon>
+        <ion-icon name={icon} title={title}></ion-icon>
       </span>
       <span className="mr-1">{data}</span>
     </div>