chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

masonry gallery

Browse Source
This commit is contained in:
Chuck Dries
2021-06-13 22:11:16 -07:00
parent 909657d0ee
commit 820aa17278
6 changed files with 91 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
gatsby/src/pages/gallery.js
View File

@@ -1,8 +1,10 @@
import * as React from "react"
import { graphql, Link } from 'gatsby'
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import { getMeta } from "../utils"
import { Helmet } from "react-helmet"
import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"
import { getMeta } from "../utils"
const GalleryPage = ({ data }) => {
const images = React.useMemo(() =>
@@ -23,42 +25,35 @@ const GalleryPage = ({ data }) => {
, [data])
return (<>
<Helmet>
<title>Gallery | Chuck Dries</title>
</Helmet>
<div className="bg-black">
<h1 className="text-2xl">Gallery</h1>
{images.map(image => {
console.log('ar', image.childImageSharp)
const name = getMeta(image).iptc.object_name || image.base
// const {
// name: object_name,
// aspectRatio
// }
// const file = data.allFile
// console.log(fileName)
// return <></>
return (
// <div style={{ maxHeight: '500px' }} className="flex-shrink-0 mr-4 scroll-snap-start bg-red-300">
// .
<React.Fragment key={name}>
<Link to={`/gallery/${image.base}`}>
{/* <span>{name}</span> */}
<GatsbyImage
className=""
style={{
// maxHeight: "800px"
// width: '400px',
// height: '100%'
}}
key={image.base}
image={getImage(image)}
alt={name} />
</Link>
</React.Fragment>
);
})}
</div>
<Helmet>
<title>Gallery | Chuck Dries</title>
<body className="bg-black" />
</Helmet>
<div className="bg-black min-h-screen">
<h1 className="text-2xl">Gallery</h1>
<div className="mx-auto" style={{maxWidth: '1800px'}}>
<ResponsiveMasonry
columnsCountBreakPoints={{ 350: 1, 650: 2, 1200: 3 }}
>
<Masonry gutter='5px'>
{images.map(image => {
console.log('ar', image.childImageSharp)
const name = getMeta(image).iptc.object_name || image.base
return (
<React.Fragment key={name}>
<Link state={{modal: true}} to={`/gallery/${image.base}`}>
<GatsbyImage
key={image.base}
image={getImage(image)}
alt={name} />
</Link>
</React.Fragment>
);
})}
</Masonry>
</ResponsiveMasonry>
</div>
</div>
</>)
}
@@ -76,21 +71,21 @@ query GalleryPageQuery {
},
gatsbyImageData(
layout: CONSTRAINED,
width: 400
width: 650
)
fields {
imageMeta {
dateTaken
iptc {
caption
# caption
object_name
}
exif {
FNumber
ExposureTime
ShutterSpeedValue
ISO
}
# exif {
# FNumber
# ExposureTime
# ShutterSpeedValue
# ISO
# }
}
}
}

15
gatsby/src/templates/gallery-image.js
View File

@@ -11,23 +11,15 @@ const GalleryImage = ({ pageContext, data }) => {
return (<>
<Helmet>
<title>{name} - Gallery | Chuck Dries</title>
<body className="bg-black" />
</Helmet>
<div className="bg-black h-screen w-screen">
<div className="h-screen w-screen flex flex-col">
<h1>{name}</h1>
<GatsbyImage
className=""
className="flex-auto"
loading='eager'
objectFit='contain'
style={{
// width: '100%',
// height: '100%',
// objectFit: 'contain',
// objectPosition: 'center',
// maxWidth: 'min(100vw, 1500px)',
// maxWidth: '100%',
// maxHeight: '100vh'
// maxHeight: "800px"
// width: '400px',
width: '100%',
height: '100%'
}}
@@ -63,6 +55,7 @@ export const query = graphql`
iptc {
caption
object_name
keywords
}
exif {
FNumber

2
gatsby/src/utils.js
View File

@@ -1,3 +1,3 @@
export const getMeta = (image) => image.childImageSharp.fields.imageMeta
export const getName = (image) => getMeta(image).iptc.object_name || image.base
export const getName = (image) => getMeta(image)?.iptc.object_name || image.base