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

improve gallery image page layout

Browse Source
This commit is contained in:
Chuck Dries 2021-06-18 19:04:40 -07:00
parent a5ef0eff2c
commit 79b2fa9a63
No known key found for this signature in database
GPG Key ID: 4E6B9B2DCEC64BA9
3 changed files with 2 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
gatsby/gatsby-node.js
View File

@ -38,20 +38,11 @@ function transformMetaToNodeData(exifData, iptcData, vibrantData) {
} }
} }
// console.log('asdf', JSON.stringify(vibrantData.Vibrant.getTitleTextColor()));
const vibrant = R.map((swatch) => ({ const vibrant = R.map((swatch) => ({
rgb: swatch.getRgb(), rgb: swatch.getRgb(),
titleTextColor: swatch.getTitleTextColor(), titleTextColor: swatch.getTitleTextColor(),
bodyTextColor: swatch.getBodyTextColor(), bodyTextColor: swatch.getBodyTextColor(),
}) })
// ({
// // rgb: swatch.getRgb(),
// // hsl: swatch.getHsl(),
// // hex: swatch.getHex(),
// // // titleTextColor: swatch.getTitleTextColor(),
// // // bodyTextColor: swatch.getBodyTextColor(),
// })
, vibrantData); , vibrantData);
return { return {

4
gatsby/src/components/GalleryImage.js
View File

@ -27,7 +27,7 @@ const GalleryImage = ({ data }) => {
const meta = getMeta(image); const meta = getMeta(image);
const vibrant = getVibrant(image, true); const vibrant = getVibrant(image, true);
const orientationClasses = ar > 1 ? 'flex-col' : 'landscape:flex-row-reverse portrait:flex-col'; const orientationClasses = ar > 1 ? 'flex-col mx-auto' : 'portrait:mx-auto landscape:mx-4 landscape:flex-row-reverse portrait:flex-col';
console.log(ar, orientationClasses); console.log(ar, orientationClasses);
const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]); const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
return (<> return (<>
@ -40,7 +40,7 @@ const GalleryImage = ({ data }) => {
</Helmet> </Helmet>
<Link className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute" to="/photogallery">gallery</Link> <Link className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute" to="/photogallery">gallery</Link>
<div className="min-h-screen pt-4 flex flex-col justify-center"> <div className="min-h-screen pt-4 flex flex-col justify-center">
<div className={classnames('flex mx-auto landscpae:mx-1', orientationClasses)}> <div className={classnames('flex', orientationClasses)}>
<div className="flex-grow-0"> <div className="flex-grow-0">
<GatsbyImage <GatsbyImage
alt={name} alt={name}

4
gatsby/src/pages/index.js
View File

@ -74,7 +74,6 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
<HeroA href="https://devpost.com/chuckdries" isClient={isClient}>Devpost</HeroA>/ <HeroA href="https://devpost.com/chuckdries" isClient={isClient}>Devpost</HeroA>/
<HeroA href="/CharlesDriesResumeCurrent.pdf" isClient={isClient}>Resume [pdf]</HeroA>/ <HeroA href="/CharlesDriesResumeCurrent.pdf" isClient={isClient}>Resume [pdf]</HeroA>/
<HeroA href="https://medium.com/@chuckdries" isClient={isClient}>Medium (blog)</HeroA> <HeroA href="https://medium.com/@chuckdries" isClient={isClient}>Medium (blog)</HeroA>
{/* <a href="https://pgp.mit.edu/pks/lookup?op=get&search=0x2BD9D0871DB5A518">Public Key</a> */}
</li> </li>
</ul> </ul>
</div> </div>
@ -109,10 +108,7 @@ export const query = graphql`
childImageSharp { childImageSharp {
gatsbyImageData( gatsbyImageData(
layout: FULL_WIDTH layout: FULL_WIDTH
# placeholder: BLURRED
# placeholder: TRACED_SVG
placeholder: NONE placeholder: NONE
# blurredOptions: {width: 50}
breakpoints: [750, 1080, 1366, 1920, 2560] breakpoints: [750, 1080, 1366, 1920, 2560]
) )
fields { fields {