import React from 'react'; import { graphql, 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'; const GalleryImage = ({ data }) => { const image = data.allFile.edges[0].node; const ar = getAspectRatio(image); // console.log(ar); // TODO: layout by comparing aspect ratio of browser to aspect ratio of image // TODO: metadata // console.log(`calc(90vw * ${ar})px`); const name = getName(image); const meta = getMeta(image); const vibrant = getVibrant(image, true); const orientationClasses = ar > 1 ? 'flex-col' : 'landscape:flex-row-reverse portrait:flex-col'; console.log(ar, orientationClasses); const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]); return (<> {name} - Gallery | Chuck Dries gallery

{hasName(image) &&

{name}

}

{meta.iptc.caption}

{shutterSpeed &&

Shutter speed: {shutterSpeed}

} {meta.exif.FNumber &&

Aperture: f/{meta.exif.FNumber}

} {meta.exif.ISO &&

ISO: {meta.exif.ISO}

}

); }; 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 ) fields { imageMeta { dateTaken iptc { caption object_name keywords } exif { FNumber ExposureTime ISO } vibrant { ...VibrantColors } } } } } } } } `; export default GalleryImage;