Add camera and lens metadata to gallery images

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,

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

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>