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

better looking vertical gallery images

Browse Source
This commit is contained in:
Chuck Dries 2021-06-13 22:48:26 -07:00
parent 9b07079638
commit 9a7c8c415f
3 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
gatsby/package-lock.json generated
View File

@ -12,6 +12,7 @@
"@mdx-js/react": "^1.6.22", "@mdx-js/react": "^1.6.22",
"autoprefixer": "^10.2.6", "autoprefixer": "^10.2.6",
"babel-plugin-styled-components": "^1.12.0", "babel-plugin-styled-components": "^1.12.0",
"classnames": "^2.3.1",
"fast-exif": "^1.0.1", "fast-exif": "^1.0.1",
"gatsby": "^3.4.1", "gatsby": "^3.4.1",
"gatsby-plugin-image": "^1.6.0", "gatsby-plugin-image": "^1.6.0",
@ -5828,6 +5829,11 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/classnames": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
},
"node_modules/clean-stack": { "node_modules/clean-stack": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@ -29625,6 +29631,11 @@
} }
} }
}, },
"classnames": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
},
"clean-stack": { "clean-stack": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",

1
gatsby/package.json
View File

@ -19,6 +19,7 @@
"@mdx-js/react": "^1.6.22", "@mdx-js/react": "^1.6.22",
"autoprefixer": "^10.2.6", "autoprefixer": "^10.2.6",
"babel-plugin-styled-components": "^1.12.0", "babel-plugin-styled-components": "^1.12.0",
"classnames": "^2.3.1",
"fast-exif": "^1.0.1", "fast-exif": "^1.0.1",
"gatsby": "^3.4.1", "gatsby": "^3.4.1",
"gatsby-plugin-image": "^1.6.0", "gatsby-plugin-image": "^1.6.0",

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

@ -3,6 +3,7 @@ import { graphql } from 'gatsby'
import { getMeta, getName } from "../utils"; import { getMeta, getName } from "../utils";
import { GatsbyImage, getImage } from "gatsby-plugin-image" import { GatsbyImage, getImage } from "gatsby-plugin-image"
import { Helmet } from "react-helmet"; import { Helmet } from "react-helmet";
import classnames from 'classnames'
const GalleryImage = ({ pageContext, data }) => { const GalleryImage = ({ pageContext, data }) => {
const image = data.allFile.edges[0].node const image = data.allFile.edges[0].node
@ -15,6 +16,8 @@ const GalleryImage = ({ pageContext, data }) => {
// imageStyle.height = '90vh' // imageStyle.height = '90vh'
// } // }
console.log(`calc(90vw * ${ar})px`)
const name = getName(image); const name = getName(image);
return (<> return (<>
<Helmet> <Helmet>
@ -22,23 +25,28 @@ const GalleryImage = ({ pageContext, data }) => {
<body className="bg-black" /> <body className="bg-black" />
</Helmet> </Helmet>
<div className="min-h-screen flex flex-col justify-center"> <div className="min-h-screen flex flex-col justify-center">
{/* use inline-block to set width to same as children but it still doesn't work for vert images */} {/* TODO: change layout by amount of empty space on side of page, not aspect ratio? */}
{/* todo: totally different layout for vertical images? by inspecting aspect ratio? Ohhhh yes */} <div style={{ margin: '0 5vw' }} className={classnames("flex mx-auto", ar > 1 ? 'flex-col' : 'flex-row-reverse')}>
<div style={{margin: '0 5vw'}} className="mx-auto"> <div className='flex-grow-0'>
<h1 className="text-2xl mt-2">{name}</h1> <h1 className="text-2xl mt-2">{name}</h1>
<GatsbyImage <GatsbyImage
className="" className=""
loading='eager' loading='eager'
objectFit='contain' objectFit='contain'
style={{ style={{
// width: '90vw', maxWidth: `calc(max(90vh, 500px) * ${ar})`,
height: '100%', // height: '90vh',
maxHeight: '90vh' maxHeight: '90vh',
minHeight: '500px'
}} }}
key={image.base} key={image.base}
image={getImage(image)} image={getImage(image)}
alt={name} /> alt={name} />
</div>
<div className={classnames('flex-shrink-0 mr-4', ar <= 1 && 'pt-4 flex-auto text-right')}>
<p>{getMeta(image).iptc.caption}</p> <p>{getMeta(image).iptc.caption}</p>
<p>some other meta</p>
</div>
</div> </div>
</div> </div>
</>); </>);