From 9b070796384a494acc6316fdfb72c257430a0546 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sun, 13 Jun 2021 22:27:58 -0700
Subject: [PATCH] better gallery-image
---
gatsby/src/templates/gallery-image.js | 53 +++++++++++++++++----------
1 file changed, 33 insertions(+), 20 deletions(-)
diff --git a/gatsby/src/templates/gallery-image.js b/gatsby/src/templates/gallery-image.js
index accf428..d8cdfca 100644
--- a/gatsby/src/templates/gallery-image.js
+++ b/gatsby/src/templates/gallery-image.js
@@ -6,27 +6,40 @@ 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>
- <GatsbyImage
- className="flex-auto"
- loading='eager'
- objectFit='contain'
- style={{
- width: '100%',
- height: '100%'
- }}
- key={image.base}
- image={getImage(image)}
- alt={name} />
- <p>{getMeta(image).iptc.caption}</p>
+ <Helmet>
+ <title>{name} - Gallery | Chuck Dries</title>
+ <body className="bg-black" />
+ </Helmet>
+ <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=""
+ loading='eager'
+ objectFit='contain'
+ style={{
+ // 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