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

better gallery-image

Browse Source
This commit is contained in:
Chuck Dries 2021-06-13 22:27:58 -07:00
parent 820aa17278
commit 9b07079638
1 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,27 +6,40 @@ import { Helmet } from "react-helmet";
const GalleryImage = ({ pageContext, data }) => { const GalleryImage = ({ pageContext, data }) => {
const image = data.allFile.edges[0].node const image = data.allFile.edges[0].node
console.log(getMeta(image)); const ar = image.childImageSharp.fluid.aspectRatio;
console.log(ar);
// const imageStyle = {}
// if (ar > 1) {
// imageStyle.width = '90vw'
// } else {
// imageStyle.height = '90vh'
// }
const name = getName(image); const name = getName(image);
return (<> return (<>
<Helmet> <Helmet>
<title>{name} - Gallery | Chuck Dries</title> <title>{name} - Gallery | Chuck Dries</title>
<body className="bg-black" /> <body className="bg-black" />
</Helmet> </Helmet>
<div className="h-screen w-screen flex flex-col"> <div className="min-h-screen flex flex-col justify-center">
<h1>{name}</h1> {/* use inline-block to set width to same as children but it still doesn't work for vert images */}
<GatsbyImage {/* todo: totally different layout for vertical images? by inspecting aspect ratio? Ohhhh yes */}
className="flex-auto" <div style={{margin: '0 5vw'}} className="mx-auto">
loading='eager' <h1 className="text-2xl mt-2">{name}</h1>
objectFit='contain' <GatsbyImage
style={{ className=""
width: '100%', loading='eager'
height: '100%' objectFit='contain'
}} style={{
key={image.base} // width: '90vw',
image={getImage(image)} height: '100%',
alt={name} /> maxHeight: '90vh'
<p>{getMeta(image).iptc.caption}</p> }}
key={image.base}
image={getImage(image)}
alt={name} />
<p>{getMeta(image).iptc.caption}</p>
</div>
</div> </div>
</>); </>);
} }
@ -44,7 +57,7 @@ export const query = graphql`
} }
gatsbyImageData( gatsbyImageData(
layout: CONSTRAINED layout: CONSTRAINED
placeholder: BLURRED # placeholder: BLURRED
# placeholder: DOMINANT_COLOR # placeholder: DOMINANT_COLOR
# placeholder: TRACED_SVG # placeholder: TRACED_SVG
height: 2048 height: 2048