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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gatsby/gatsby-config.js
View File

@ -39,6 +39,6 @@ module.exports = {
path: "./src/pages/", path: "./src/pages/",
}, },
__key: "pages", __key: "pages",
}, }
], ],
}; };

82
gatsby/package-lock.json generated
View File

@ -28,11 +28,13 @@
"react": "^17.0.1", "react": "^17.0.1",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-responsive-masonry": "^2.1.2",
"sass": "^1.34.0", "sass": "^1.34.0",
"styled-components": "^5.3.0", "styled-components": "^5.3.0",
"tailwindcss": "^2.1.2" "tailwindcss": "^2.1.2"
}, },
"devDependencies": { "devDependencies": {
"eslint": "^7.28.0",
"eslint-config-react-app": "^6.0.0" "eslint-config-react-app": "^6.0.0"
} }
}, },
@ -1628,14 +1630,14 @@
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==" "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
}, },
"node_modules/@eslint/eslintrc": { "node_modules/@eslint/eslintrc": {
"version": "0.4.1", "version": "0.4.2",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.1.tgz", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
"integrity": "sha512-5v7TDE9plVhvxQeWLXDTvFvJBdH6pEsdnl2g/dAptmuFEPedQ4Erq5rsDsX+mvAM610IhNaO2W5V1dOOnDKxkQ==", "integrity": "sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==",
"dependencies": { "dependencies": {
"ajv": "^6.12.4", "ajv": "^6.12.4",
"debug": "^4.1.1", "debug": "^4.1.1",
"espree": "^7.3.0", "espree": "^7.3.0",
"globals": "^12.1.0", "globals": "^13.9.0",
"ignore": "^4.0.6", "ignore": "^4.0.6",
"import-fresh": "^3.2.1", "import-fresh": "^3.2.1",
"js-yaml": "^3.13.1", "js-yaml": "^3.13.1",
@ -1663,11 +1665,11 @@
} }
}, },
"node_modules/@eslint/eslintrc/node_modules/globals": { "node_modules/@eslint/eslintrc/node_modules/globals": {
"version": "12.4.0", "version": "13.9.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz", "resolved": "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz",
"integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==", "integrity": "sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==",
"dependencies": { "dependencies": {
"type-fest": "^0.8.1" "type-fest": "^0.20.2"
}, },
"engines": { "engines": {
"node": ">=8" "node": ">=8"
@ -1681,14 +1683,6 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" "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": { "node_modules/@fullhuman/postcss-purgecss": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz", "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@ -8796,12 +8790,12 @@
} }
}, },
"node_modules/eslint": { "node_modules/eslint": {
"version": "7.27.0", "version": "7.28.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-7.27.0.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.28.0.tgz",
"integrity": "sha512-JZuR6La2ZF0UD384lcbnd0Cgg6QJjiCwhMD6eU4h/VGPcVGwawNNzKU41tgokGXnfjOOyI6QIffthhJTPzzuRA==", "integrity": "sha512-UMfH0VSjP0G4p3EWirscJEQ/cHqnT/iuH6oNZOB94nBjWbMnhGEPxsZm1eyIW0C/9jLI0Fow4W5DXLjEI7mn1g==",
"dependencies": { "dependencies": {
"@babel/code-frame": "7.12.11", "@babel/code-frame": "7.12.11",
"@eslint/eslintrc": "^0.4.1", "@eslint/eslintrc": "^0.4.2",
"ajv": "^6.10.0", "ajv": "^6.10.0",
"chalk": "^4.0.0", "chalk": "^4.0.0",
"cross-spawn": "^7.0.2", "cross-spawn": "^7.0.2",
@ -8818,7 +8812,7 @@
"fast-deep-equal": "^3.1.3", "fast-deep-equal": "^3.1.3",
"file-entry-cache": "^6.0.1", "file-entry-cache": "^6.0.1",
"functional-red-black-tree": "^1.0.1", "functional-red-black-tree": "^1.0.1",
"glob-parent": "^5.0.0", "glob-parent": "^5.1.2",
"globals": "^13.6.0", "globals": "^13.6.0",
"ignore": "^4.0.6", "ignore": "^4.0.6",
"import-fresh": "^3.0.0", "import-fresh": "^3.0.0",
@ -18977,6 +18971,15 @@
"node": ">=0.10.0" "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": { "node_modules/react-side-effect": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
@ -26288,14 +26291,14 @@
} }
}, },
"@eslint/eslintrc": { "@eslint/eslintrc": {
"version": "0.4.1", "version": "0.4.2",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.1.tgz", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
"integrity": "sha512-5v7TDE9plVhvxQeWLXDTvFvJBdH6pEsdnl2g/dAptmuFEPedQ4Erq5rsDsX+mvAM610IhNaO2W5V1dOOnDKxkQ==", "integrity": "sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==",
"requires": { "requires": {
"ajv": "^6.12.4", "ajv": "^6.12.4",
"debug": "^4.1.1", "debug": "^4.1.1",
"espree": "^7.3.0", "espree": "^7.3.0",
"globals": "^12.1.0", "globals": "^13.9.0",
"ignore": "^4.0.6", "ignore": "^4.0.6",
"import-fresh": "^3.2.1", "import-fresh": "^3.2.1",
"js-yaml": "^3.13.1", "js-yaml": "^3.13.1",
@ -26312,22 +26315,17 @@
} }
}, },
"globals": { "globals": {
"version": "12.4.0", "version": "13.9.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz", "resolved": "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz",
"integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==", "integrity": "sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==",
"requires": { "requires": {
"type-fest": "^0.8.1" "type-fest": "^0.20.2"
} }
}, },
"ms": { "ms": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" "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==" "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
}, },
"eslint": { "eslint": {
"version": "7.27.0", "version": "7.28.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-7.27.0.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.28.0.tgz",
"integrity": "sha512-JZuR6La2ZF0UD384lcbnd0Cgg6QJjiCwhMD6eU4h/VGPcVGwawNNzKU41tgokGXnfjOOyI6QIffthhJTPzzuRA==", "integrity": "sha512-UMfH0VSjP0G4p3EWirscJEQ/cHqnT/iuH6oNZOB94nBjWbMnhGEPxsZm1eyIW0C/9jLI0Fow4W5DXLjEI7mn1g==",
"requires": { "requires": {
"@babel/code-frame": "7.12.11", "@babel/code-frame": "7.12.11",
"@eslint/eslintrc": "^0.4.1", "@eslint/eslintrc": "^0.4.2",
"ajv": "^6.10.0", "ajv": "^6.10.0",
"chalk": "^4.0.0", "chalk": "^4.0.0",
"cross-spawn": "^7.0.2", "cross-spawn": "^7.0.2",
@ -31898,7 +31896,7 @@
"fast-deep-equal": "^3.1.3", "fast-deep-equal": "^3.1.3",
"file-entry-cache": "^6.0.1", "file-entry-cache": "^6.0.1",
"functional-red-black-tree": "^1.0.1", "functional-red-black-tree": "^1.0.1",
"glob-parent": "^5.0.0", "glob-parent": "^5.1.2",
"globals": "^13.6.0", "globals": "^13.6.0",
"ignore": "^4.0.6", "ignore": "^4.0.6",
"import-fresh": "^3.0.0", "import-fresh": "^3.0.0",
@ -39682,6 +39680,12 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
"integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==" "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": { "react-side-effect": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",

2
gatsby/package.json
View File

@ -35,11 +35,13 @@
"react": "^17.0.1", "react": "^17.0.1",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-helmet": "^6.1.0", "react-helmet": "^6.1.0",
"react-responsive-masonry": "^2.1.2",
"sass": "^1.34.0", "sass": "^1.34.0",
"styled-components": "^5.3.0", "styled-components": "^5.3.0",
"tailwindcss": "^2.1.2" "tailwindcss": "^2.1.2"
}, },
"devDependencies": { "devDependencies": {
"eslint": "^7.28.0",
"eslint-config-react-app": "^6.0.0" "eslint-config-react-app": "^6.0.0"
} }
} }

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

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

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

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

2
gatsby/src/utils.js
View File

@ -1,3 +1,3 @@
export const getMeta = (image) => image.childImageSharp.fields.imageMeta 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