import React from "react"; import { graphql, navigate, Link } from "gatsby"; import { getAspectRatio, getMeta, getName, getShutterFractionFromExposureTime, getVibrant, getVibrantToHelmetSafeBodyStyle, hasName, } from "../../utils"; import { GatsbyImage, getImage } from "gatsby-plugin-image"; import { Helmet } from "react-helmet"; import classnames from "classnames"; import MetadataItem from "./MetadataItem"; const logKeyShortcut = (keyCode) => { try { // eslint-disable-next-line window.plausible("KeyShortcut", { props: { keyCode } }); // eslint-disable-next-line _paq.push(["trackEvent", "GalleryImage", "KeyShortcut", keyCode]); } catch (e) { /* do nothing */ } }; const GalleryImage = ({ data, pageContext }) => { const image = data.allFile.edges[0].node; const ar = getAspectRatio(image); React.useEffect(() => { const keyListener = (e) => { switch (e.code) { case "ArrowRight": { logKeyShortcut(e.code); if (pageContext.nextImage) { navigate(`/photogallery/${pageContext.nextImage}/`); } return; } case "ArrowLeft": { logKeyShortcut(e.code); if (pageContext.prevImage) { navigate(`/photogallery/${pageContext.prevImage}/`); } return; } case "Escape": case "KeyG": { logKeyShortcut(e.code); navigate("/photogallery/"); } } }; document.addEventListener("keydown", keyListener); return () => { document.removeEventListener("keydown", keyListener); }; }, [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 orientationClasses = ar > 1 ? "flex-col mx-auto" : "portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col"; const shutterSpeed = React.useMemo( () => getShutterFractionFromExposureTime(meta.ExposureTime || 0), [meta] ); const dateTaken = React.useMemo(() => new Date(dt), [dt]); return ( <> {name} - Gallery | Chuck Dries

{image.base}

{hasName(image) && (

{name}

)}

{meta.Caption}

{
}
{(meta.Make || meta.Model) && ( )} {(meta.LensModel || meta.FocalLength) && ( )} {meta.FNumber && ( )}
); }; export const query = graphql` query GalleryImage($imageFilename: String) { allFile( filter: { sourceInstanceName: { eq: "gallery" } base: { eq: $imageFilename } } ) { edges { node { base childImageSharp { fluid { aspectRatio } gatsbyImageData( layout: CONSTRAINED # placeholder: BLURRED placeholder: DOMINANT_COLOR # placeholder: TRACED_SVG height: 2160 quality: 90 ) } fields { imageMeta { dateTaken meta { Make Model ExposureTime FNumber ISO DateTimeOriginal CreateDate ShutterSpeedValue ApertureValue FocalLength LensModel ObjectName Caption Location City State } vibrant { ...VibrantColors } } } } } } } `; export default GalleryImage;