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",
             }}
           >
+            {zoom ? (
+              <img
+                alt={name}
+                src={image.publicURL}
+                style={{
+                  maxWidth: "unset",
+                }}
+              />
+            ) : (
               <GatsbyImage
                 alt={name}
-              className={classnames(
+                className="border-4 border-vibrant"
-                "border-4 border-vibrant",
-                zoom ? "cursor-zoom-out" : "cursor-zoom-in"
-              )}
                 image={getImage(image)}
                 key={image.base}
                 loading="eager"
                 objectFit="contain"
-              onClick={() => setZoom((_zoom) => !_zoom)}
               />
+            )}
           </div>
           <div
             className={classnames(
@@ -259,14 +264,7 @@ const GalleryImage = ({ data, pageContext }) => {
 
 export const query = graphql`
   query GalleryImage($imageFilename: String) {
-    allFile(
+    file(base: { eq: $imageFilename }) {
-      filter: {
-        sourceInstanceName: { eq: "gallery" }
-        base: { eq: $imageFilename }
-      }
-    ) {
-      edges {
-        node {
       base
       publicURL
       childImageSharp {
@@ -275,10 +273,7 @@ export const query = graphql`
         }
         gatsbyImageData(
           layout: CONSTRAINED
-              # placeholder: BLURRED
           placeholder: DOMINANT_COLOR
-              # placeholder: TRACED_SVG
-              height: 2160
           quality: 90
         )
       }
@@ -310,8 +305,6 @@ export const query = graphql`
       }
     }
   }
-    }
-  }
 `;
 
 export default GalleryImage;

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})`;