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

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

@ -6,28 +6,41 @@ import { Helmet } from "react-helmet";
const GalleryImage = ({ pageContext, data }) => {
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);
return (<>
<Helmet>
<title>{name} - Gallery | Chuck Dries</title>
<body className="bg-black" />
</Helmet>
<div className="h-screen w-screen flex flex-col">
<h1>{name}</h1>
<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: totally different layout for vertical images? by inspecting aspect ratio? Ohhhh yes */}
<div style={{margin: '0 5vw'}} className="mx-auto">
<h1 className="text-2xl mt-2">{name}</h1>
<GatsbyImage
className="flex-auto"
className=""
loading='eager'
objectFit='contain'
style={{
width: '100%',
height: '100%'
// width: '90vw',
height: '100%',
maxHeight: '90vh'
}}
key={image.base}
image={getImage(image)}
alt={name} />
<p>{getMeta(image).iptc.caption}</p>
</div>
</div>
</>);
}
@ -44,7 +57,7 @@ export const query = graphql`
}
gatsbyImageData(
layout: CONSTRAINED
placeholder: BLURRED
# placeholder: BLURRED
# placeholder: DOMINANT_COLOR
# placeholder: TRACED_SVG
height: 2048