zoom feature displays original images at native size

src/components/GalleryImage/GalleryImage.js

@@ -20,6 +20,7 @@ import {
   getVibrant,
   getHelmetSafeBodyStyle,
   hasName,
+  getCanonicalSize,
 } from "../../utils";
 import MetadataItem from "./MetadataItem";
 
@@ -35,7 +36,7 @@ const logKeyShortcut = (keyCode) => {
 };
 
 const GalleryImage = ({ data, pageContext }) => {
-  const image = data.allFile.edges[0].node;
+  const image = data.file;
   const ar = getAspectRatio(image);
 
   const [zoom, setZoom] = useState(false);
@@ -72,13 +73,13 @@ const GalleryImage = ({ data, pageContext }) => {
 
   const name = getName(image);
   const { meta, dateTaken: dt } = getMeta(image);
-  // const locationString = meta.City;
   let locationString;
   if (meta.City || meta.State || meta.Location) {
     const location = [meta.Location, meta.City, meta.State].filter(Boolean);
     locationString = location.join(", ");
   }
   const vibrant = getVibrant(image, true);
+  const canonicalSize = getCanonicalSize(image);
 
   const orientationClasses =
     ar > 1
@@ -140,29 +141,33 @@ const GalleryImage = ({ data, pageContext }) => {
         </nav>
         <div className={classnames("flex", orientationClasses)}>
           <div
-            className="flex-grow-0 mb-2 overflow-hidden"
+            className={classnames(
+              zoom ? "cursor-zoom-out" : "cursor-zoom-in",
+              "mb-2"
+            )}
+            onClick={() => setZoom((_zoom) => !_zoom)}
             style={{
-              maxWidth: zoom
+              maxWidth: `calc(max(calc(100vh - ${verticalPad}), 500px) * ${ar})`,
-                ? "unset"
-                : `calc(max(calc(100vh - ${verticalPad}), 500px) * ${ar})`,
-              width: zoom
-                ? `max(calc(100vw - 16px), calc(100vh * ${ar}))`
-                : "unset",
-              // minHeight: zoom ? "100vh" : "unset",
             }}
           >
-            <GatsbyImage
+            {zoom ? (
-              alt={name}
+              <img
-              className={classnames(
+                alt={name}
-                "border-4 border-vibrant",
+                src={image.publicURL}
-                zoom ? "cursor-zoom-out" : "cursor-zoom-in"
+                style={{
-              )}
+                  maxWidth: "unset",
-              image={getImage(image)}
+                }}
-              key={image.base}
+              />
-              loading="eager"
+            ) : (
-              objectFit="contain"
+              <GatsbyImage
-              onClick={() => setZoom((_zoom) => !_zoom)}
+                alt={name}
-            />
+                className="border-4 border-vibrant"
+                image={getImage(image)}
+                key={image.base}
+                loading="eager"
+                objectFit="contain"
+              />
+            )}
           </div>
           <div
             className={classnames(
@@ -259,54 +264,42 @@ const GalleryImage = ({ data, pageContext }) => {
 
 export const query = graphql`
   query GalleryImage($imageFilename: String) {
-    allFile(
+    file(base: { eq: $imageFilename }) {
-      filter: {
+      base
-        sourceInstanceName: { eq: "gallery" }
+      publicURL
-        base: { eq: $imageFilename }
+      childImageSharp {
+        fluid {
+          aspectRatio
+        }
+        gatsbyImageData(
+          layout: CONSTRAINED
+          placeholder: DOMINANT_COLOR
+          quality: 90
+        )
       }
-    ) {
+      fields {
-      edges {
+        imageMeta {
-        node {
+          dateTaken
-          base
+          meta {
-          publicURL
+            Make
-          childImageSharp {
+            Model
-            fluid {
+            ExposureTime
-              aspectRatio
+            FNumber
-            }
+            ISO
-            gatsbyImageData(
+            DateTimeOriginal
-              layout: CONSTRAINED
+            CreateDate
-              # placeholder: BLURRED
+            ShutterSpeedValue
-              placeholder: DOMINANT_COLOR
+            ApertureValue
-              # placeholder: TRACED_SVG
+            FocalLength
-              height: 2160
+            LensModel
-              quality: 90
+            ObjectName
-            )
+            Caption
+            Location
+            City
+            State
           }
-          fields {
+          vibrant {
-            imageMeta {
+            ...VibrantColors
-              dateTaken
-              meta {
-                Make
-                Model
-                ExposureTime
-                FNumber
-                ISO
-                DateTimeOriginal
-                CreateDate
-                ShutterSpeedValue
-                ApertureValue
-                FocalLength
-                LensModel
-                ObjectName
-                Caption
-                Location
-                City
-                State
-              }
-              vibrant {
-                ...VibrantColors
-              }
-            }
           }
         }
       }

src/utils.js

@@ -13,6 +13,11 @@ export const hasName = (image) => Boolean(getMeta(image)?.meta?.ObjectName);
 export const getAspectRatio = (image) =>
   image.childImageSharp.fluid.aspectRatio;
 
+export const getCanonicalSize = (image) => ({
+  height: image.childImageSharp.gatsbyImageData.height,
+  width: image.childImageSharp.gatsbyImageData.width,
+});
+
 export const getRgba = (palette, alpha) =>
   `rgba(${palette[0]}, ${palette[1]}, ${palette[2]}, ${alpha || 1})`;