From 820aa172785ac6b8363cdbb6bcbf1137fa794fe2 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sun, 13 Jun 2021 22:11:16 -0700
Subject: [PATCH] masonry gallery
---
gatsby/gatsby-config.js | 2 +-
gatsby/package-lock.json | 82 ++++++++++++++------------
gatsby/package.json | 2 +
gatsby/src/pages/gallery.js | 85 +++++++++++++--------------
gatsby/src/templates/gallery-image.js | 15 ++---
gatsby/src/utils.js | 2 +-
6 files changed, 91 insertions(+), 97 deletions(-)
diff --git a/gatsby/gatsby-config.js b/gatsby/gatsby-config.js
index df2b25d..3524806 100644
--- a/gatsby/gatsby-config.js
+++ b/gatsby/gatsby-config.js
@@ -39,6 +39,6 @@ module.exports = {
path: "./src/pages/",
},
__key: "pages",
- },
+ }
],
};
diff --git a/gatsby/package-lock.json b/gatsby/package-lock.json
index 32daa2c..e8adca1 100644
--- a/gatsby/package-lock.json
+++ b/gatsby/package-lock.json
@@ -28,11 +28,13 @@
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
+ "react-responsive-masonry": "^2.1.2",
"sass": "^1.34.0",
"styled-components": "^5.3.0",
"tailwindcss": "^2.1.2"
},
"devDependencies": {
+ "eslint": "^7.28.0",
"eslint-config-react-app": "^6.0.0"
}
},
@@ -1628,14 +1630,14 @@
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
},
"node_modules/@eslint/eslintrc": {
- "version": "0.4.1",
- "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.1.tgz",
- "integrity": "sha512-5v7TDE9plVhvxQeWLXDTvFvJBdH6pEsdnl2g/dAptmuFEPedQ4Erq5rsDsX+mvAM610IhNaO2W5V1dOOnDKxkQ==",
+ "version": "0.4.2",
+ "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
+ "integrity": "sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==",
"dependencies": {
"ajv": "^6.12.4",
"debug": "^4.1.1",
"espree": "^7.3.0",
- "globals": "^12.1.0",
+ "globals": "^13.9.0",
"ignore": "^4.0.6",
"import-fresh": "^3.2.1",
"js-yaml": "^3.13.1",
@@ -1663,11 +1665,11 @@
}
},
"node_modules/@eslint/eslintrc/node_modules/globals": {
- "version": "12.4.0",
- "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
- "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+ "version": "13.9.0",
+ "resolved": "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz",
+ "integrity": "sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==",
"dependencies": {
- "type-fest": "^0.8.1"
+ "type-fest": "^0.20.2"
},
"engines": {
"node": ">=8"
@@ -1681,14 +1683,6 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
- "node_modules/@eslint/eslintrc/node_modules/type-fest": {
- "version": "0.8.1",
- "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
- "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
- "engines": {
- "node": ">=8"
- }
- },
"node_modules/@fullhuman/postcss-purgecss": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@@ -8796,12 +8790,12 @@
}
},
"node_modules/eslint": {
- "version": "7.27.0",
- "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.27.0.tgz",
- "integrity": "sha512-JZuR6La2ZF0UD384lcbnd0Cgg6QJjiCwhMD6eU4h/VGPcVGwawNNzKU41tgokGXnfjOOyI6QIffthhJTPzzuRA==",
+ "version": "7.28.0",
+ "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.28.0.tgz",
+ "integrity": "sha512-UMfH0VSjP0G4p3EWirscJEQ/cHqnT/iuH6oNZOB94nBjWbMnhGEPxsZm1eyIW0C/9jLI0Fow4W5DXLjEI7mn1g==",
"dependencies": {
"@babel/code-frame": "7.12.11",
- "@eslint/eslintrc": "^0.4.1",
+ "@eslint/eslintrc": "^0.4.2",
"ajv": "^6.10.0",
"chalk": "^4.0.0",
"cross-spawn": "^7.0.2",
@@ -8818,7 +8812,7 @@
"fast-deep-equal": "^3.1.3",
"file-entry-cache": "^6.0.1",
"functional-red-black-tree": "^1.0.1",
- "glob-parent": "^5.0.0",
+ "glob-parent": "^5.1.2",
"globals": "^13.6.0",
"ignore": "^4.0.6",
"import-fresh": "^3.0.0",
@@ -18977,6 +18971,15 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-responsive-masonry": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/react-responsive-masonry/-/react-responsive-masonry-2.1.2.tgz",
+ "integrity": "sha512-Vd5XWx077VGL+Pnv4dxVA4rBl4Y5Y6snLqm29QFqHnEE8GNJtqUW96F6SgIcgWJoxfJC52Ifi5Oixz1PdeEpOA==",
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0"
+ }
+ },
"node_modules/react-side-effect": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
@@ -26288,14 +26291,14 @@
}
},
"@eslint/eslintrc": {
- "version": "0.4.1",
- "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.1.tgz",
- "integrity": "sha512-5v7TDE9plVhvxQeWLXDTvFvJBdH6pEsdnl2g/dAptmuFEPedQ4Erq5rsDsX+mvAM610IhNaO2W5V1dOOnDKxkQ==",
+ "version": "0.4.2",
+ "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
+ "integrity": "sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==",
"requires": {
"ajv": "^6.12.4",
"debug": "^4.1.1",
"espree": "^7.3.0",
- "globals": "^12.1.0",
+ "globals": "^13.9.0",
"ignore": "^4.0.6",
"import-fresh": "^3.2.1",
"js-yaml": "^3.13.1",
@@ -26312,22 +26315,17 @@
}
},
"globals": {
- "version": "12.4.0",
- "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
- "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+ "version": "13.9.0",
+ "resolved": "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz",
+ "integrity": "sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==",
"requires": {
- "type-fest": "^0.8.1"
+ "type-fest": "^0.20.2"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
- },
- "type-fest": {
- "version": "0.8.1",
- "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
- "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="
}
}
},
@@ -31876,12 +31874,12 @@
"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
},
"eslint": {
- "version": "7.27.0",
- "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.27.0.tgz",
- "integrity": "sha512-JZuR6La2ZF0UD384lcbnd0Cgg6QJjiCwhMD6eU4h/VGPcVGwawNNzKU41tgokGXnfjOOyI6QIffthhJTPzzuRA==",
+ "version": "7.28.0",
+ "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.28.0.tgz",
+ "integrity": "sha512-UMfH0VSjP0G4p3EWirscJEQ/cHqnT/iuH6oNZOB94nBjWbMnhGEPxsZm1eyIW0C/9jLI0Fow4W5DXLjEI7mn1g==",
"requires": {
"@babel/code-frame": "7.12.11",
- "@eslint/eslintrc": "^0.4.1",
+ "@eslint/eslintrc": "^0.4.2",
"ajv": "^6.10.0",
"chalk": "^4.0.0",
"cross-spawn": "^7.0.2",
@@ -31898,7 +31896,7 @@
"fast-deep-equal": "^3.1.3",
"file-entry-cache": "^6.0.1",
"functional-red-black-tree": "^1.0.1",
- "glob-parent": "^5.0.0",
+ "glob-parent": "^5.1.2",
"globals": "^13.6.0",
"ignore": "^4.0.6",
"import-fresh": "^3.0.0",
@@ -39682,6 +39680,12 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
"integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ=="
},
+ "react-responsive-masonry": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/react-responsive-masonry/-/react-responsive-masonry-2.1.2.tgz",
+ "integrity": "sha512-Vd5XWx077VGL+Pnv4dxVA4rBl4Y5Y6snLqm29QFqHnEE8GNJtqUW96F6SgIcgWJoxfJC52Ifi5Oixz1PdeEpOA==",
+ "requires": {}
+ },
"react-side-effect": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
diff --git a/gatsby/package.json b/gatsby/package.json
index 7402ec6..0130361 100644
--- a/gatsby/package.json
+++ b/gatsby/package.json
@@ -35,11 +35,13 @@
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
+ "react-responsive-masonry": "^2.1.2",
"sass": "^1.34.0",
"styled-components": "^5.3.0",
"tailwindcss": "^2.1.2"
},
"devDependencies": {
+ "eslint": "^7.28.0",
"eslint-config-react-app": "^6.0.0"
}
}
diff --git a/gatsby/src/pages/gallery.js b/gatsby/src/pages/gallery.js
index dbce685..a652346 100644
--- a/gatsby/src/pages/gallery.js
+++ b/gatsby/src/pages/gallery.js
@@ -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
+ # }
}
}
}
diff --git a/gatsby/src/templates/gallery-image.js b/gatsby/src/templates/gallery-image.js
index c3c79e1..accf428 100644
--- a/gatsby/src/templates/gallery-image.js
+++ b/gatsby/src/templates/gallery-image.js
@@ -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
diff --git a/gatsby/src/utils.js b/gatsby/src/utils.js
index e0f076a..103676c 100644
--- a/gatsby/src/utils.js
+++ b/gatsby/src/utils.js
@@ -1,3 +1,3 @@
export const getMeta = (image) => image.childImageSharp.fields.imageMeta
-export const getName = (image) => getMeta(image).iptc.object_name || image.base
\ No newline at end of file
+export const getName = (image) => getMeta(image)?.iptc.object_name || image.base
\ No newline at end of file