React iptc metadata from images

gatsby/src/pages/index.js

@@ -5,53 +5,6 @@ import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import "../styles/gallery.scss"
 import "../styles/index.scss"
 
-// data
-const links = [
-  {
-    text: "Tutorial",
-    url: "https://www.gatsbyjs.com/docs/tutorial/",
-    description:
-      "A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.",
-    color: "#E95800",
-  },
-  {
-    text: "How to Guides",
-    url: "https://www.gatsbyjs.com/docs/how-to/",
-    description:
-      "Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.",
-    color: "#1099A8",
-  },
-  {
-    text: "Reference Guides",
-    url: "https://www.gatsbyjs.com/docs/reference/",
-    description:
-      "Nitty-gritty technical descriptions of how Gatsby works. Most useful when you need detailed information about Gatsby's APIs.",
-    color: "#BC027F",
-  },
-  {
-    text: "Conceptual Guides",
-    url: "https://www.gatsbyjs.com/docs/conceptual/",
-    description:
-      "Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular topic.",
-    color: "#0D96F2",
-  },
-  {
-    text: "Plugin Library",
-    url: "https://www.gatsbyjs.com/plugins",
-    description:
-      "Add functionality and customize your Gatsby site or app with thousands of plugins built by our amazing developer community.",
-    color: "#8EB814",
-  },
-  {
-    text: "Build and Host",
-    url: "https://www.gatsbyjs.com/cloud",
-    badge: true,
-    description:
-      "Now you’re ready to show the world! Give your Gatsby site superpowers: Build and host on Gatsby Cloud. Get started for free!",
-    color: "#663399",
-  },
-]
-
 // markup
 const IndexPage = ({ data }) => {
   const images = React.useMemo(() => data.allFile.edges.map(edge => edge.node, [data]))
@@ -70,11 +23,12 @@ const IndexPage = ({ data }) => {
       </h1>
       <div className="gallery">
         {images.map(image => {
-          console.log('imag', image)
+          const name = image.childImageSharp.fields.imageMeta.iptc.object_name || image.base
+          console.log('name', name)
           // const file = data.allFile
           // console.log(fileName)
           // return <></>
-          return <GatsbyImage key={image.base} image={getImage(image)} alt={image.base} />;
+          return <GatsbyImage key={image.base} image={getImage(image)} alt={name} />;
         })}
       </div>
       <img
@@ -95,6 +49,23 @@ query HomePageGallery {
         base,
         childImageSharp{
           gatsbyImageData(width: 400)
+          fields {
+            imageMeta {
+              meta {
+                dateTaken
+              }
+              iptc {
+                caption
+                object_name
+              }
+              exif {
+                FNumber
+                ExposureTime
+                ShutterSpeedValue
+                ISO
+              }
+            }
+          }
         }
       }
     }

gatsby/src/styles/gallery.scss

@@ -1,6 +1,6 @@
 .gallery {
   width: 100%;
-  aspect-ratio: 5/3;
+  // aspect-ratio: 5/3;
   background: black;
   display: flex;
   overflow-x: scroll;
@@ -20,6 +20,7 @@
 
   .gatsby-image-wrapper {
     aspect-ratio: 3/2;
+    width: 400px;
     flex-shrink: 0;
     // height: 280px;
     // width: 350px;