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

responsive masonry gallery by hand - breakpoints break hydration

Browse Source
This commit is contained in:
Chuck Dries
2021-06-14 20:30:12 -07:00
parent b735378e96
commit ff64d4f984
10 changed files with 139 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,13 @@
import React from 'react';
import { graphql } from 'gatsby';
import { getMeta, getName, hasName } from '../utils';
import { getAspectRatio, getMeta, getName, hasName } from '../utils';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { Helmet } from 'react-helmet';
import classnames from 'classnames';
const GalleryImage = ({ data }) => {
const image = data.allFile.edges[0].node;
const ar = image.childImageSharp.fluid.aspectRatio;
const ar = getAspectRatio(image);
console.log(ar);
// const imageStyle = {}
// if (ar > 1) {
@@ -22,7 +22,7 @@ const GalleryImage = ({ data }) => {
return (<>
<Helmet>
<title>{name} - Gallery | Chuck Dries</title>
<body className="bg-black" />
<body className="bg-black text-white" />
</Helmet>
<div className="min-h-screen flex flex-col justify-center">
{/* TODO: change layout by amount of empty space on side of page, not aspect ratio? */}
@@ -95,4 +95,4 @@ export const query = graphql`
`;
export default GalleryImage;
export default GalleryImage;

68
gatsby/src/components/MasonryGallery.js Normal file
View File

@@ -0,0 +1,68 @@
import * as React from 'react';
import { Link } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import * as R from 'ramda';
import { getAspectRatio, getName } from '../utils';
// TODO: use resolveCOnfig to not need to define screens in theme file
import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '../../tailwind.config.js';
import useBreakpoint from 'use-breakpoint';
const {theme: {screens}} = resolveConfig(tailwindConfig);
const themeBreakpoints = R.map(size => parseInt(size, 10), screens);
console.log(themeBreakpoints);
const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
const breakpoints = React.useMemo(() =>
R.pick(R.keys(itemsPerRowByBreakpoint), themeBreakpoints)
, [itemsPerRowByBreakpoint]);
const { breakpoint, maxWidth, minWidth } = useBreakpoint(breakpoints, 'md');
const aspectRatios = React.useMemo(() => R.map(getAspectRatio, images), [images]);
const rowAspectRatioSumsByBreakpoint = React.useMemo(() => R.map(R.pipe(
R.splitEvery(R.__, aspectRatios),
R.map(R.sum)
))(itemsPerRowByBreakpoint), [aspectRatios, itemsPerRowByBreakpoint]);
// console.log('bp', breakpoint);
const rowAspectRatioSumsForCurrentBP = rowAspectRatioSumsByBreakpoint[breakpoint];
console.log('rowAspectRatioSumsForCurrentBP :', rowAspectRatioSumsForCurrentBP);
return (
<div
style={{
width: '100%',
position: 'relative',
}}
// className='mx-auto'
// style={{ maxWidth: minWidth }}
>
{images.map((image, i) => {
const rowIndex = Math.floor(i / itemsPerRowByBreakpoint[breakpoint]);
const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex];
// console.log('ars', rowAspectRatioSum);
if (i === 0) {
console.log(rowIndex, rowAspectRatioSum);
console.log(getName(image), `${(getAspectRatio(image) / rowAspectRatioSum) * 100}%`);
}
return (
// <Link className='inline-block' key={image.base} state={{modal: true}} to={`/photogallery/${image.base}`}>
<GatsbyImage
key={`${image.base}-img`}
className='inline-block'
style={{
width: `${(getAspectRatio(image) / rowAspectRatioSum) * 100}%`,
}}
// objectFit='contain'
image={getImage(image)}
alt={getName(image)}
/>
// </Link>
);
})}
</div>);
// return null;
};
export default MasonryGallery;

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

@@ -8,7 +8,7 @@ const IndexPage = ({ data }) => {
console.log('images', images);
return (
<main className="font-serif">
<main className="font-serif text-white">
<section style={{ height: '50vh' }} className="m-2 py-6 intro flex flex-col justify-center flex-auto bg-black rounded-xl">
<div className="mx-auto px-4 md:px-2 w-full md:w-8 ">
<h1 className="italic font-normal text-5xl text-pink-500">Chuck Dries</h1>
@@ -61,7 +61,9 @@ const IndexPage = ({ data }) => {
export const query = graphql`
query HomePageGallery {
allFile(filter: {
sourceInstanceName: { eq: "gallery" }}) {
sourceInstanceName: { eq: "gallery" }}
sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken}
) {
edges {
node {
relativePath,

72
gatsby/src/pages/photogallery.js
View File

@@ -1,59 +1,47 @@
import * as React from 'react';
import { graphql, Link } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { graphql } from 'gatsby';
// import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { Helmet } from 'react-helmet';
import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';
// import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';
import { getMeta } from '../utils';
// import { getMeta } from '../utils';
import MasonryGallery from '../components/MasonryGallery';
const GalleryPage = ({ data }) => {
const images = React.useMemo(() =>
data.allFile.edges
.map(edge => edge.node, [data])
.sort((left, right) => {
const leftDate = new Date(getMeta(left).dateTaken);
console.log(leftDate);
const rightDate = new Date(getMeta(right).dateTaken);
if (leftDate < rightDate) {
return 1;
}
if (leftDate > rightDate) {
return -1;
}
return 0;
}) // TODO HERE
// .sort((left, right) => {
// const leftDate = new Date(getMeta(left).dateTaken);
// console.log(leftDate);
// const rightDate = new Date(getMeta(right).dateTaken);
// if (leftDate < rightDate) {
// return 1;
// }
// if (leftDate > rightDate) {
// return -1;
// }
// return 0;
// }) // TODO HERE
, [data]);
return (<>
<Helmet>
<title>Gallery | Chuck Dries</title>
<body className="bg-black" />
<body className="bg-black text-white" />
</Helmet>
<div className="bg-black min-h-screen">
<h1 className="text-2xl">Gallery</h1>
<div className="mx-auto" style={{maxWidth: '1800px'}}>
{/* TODO swap masonry plugin, this one makes really unbalanced columns */}
{/* ...implement manually :sadge: */}
<ResponsiveMasonry
columnsCountBreakPoints={{ 350: 1, 650: 2, 1200: 3 }}
>
<Masonry gutter='5px'>
{images.map(image => {
console.log('ar', image.childImageSharp);
const name = getMeta(image).iptc.object_name || image.base;
return (
<React.Fragment key={name}>
<Link state={{modal: true}} to={`/photogallery/${image.base}`}>
<GatsbyImage
key={image.base}
image={getImage(image)}
alt={name} />
</Link>
</React.Fragment>
);
})}
</Masonry>
</ResponsiveMasonry>
<MasonryGallery
images={images}
itemsPerRow={{
sm: 2,
md: 3,
lg: 4,
xl: 5,
}}
/>
</div>
</div>
</>);
@@ -62,7 +50,9 @@ const GalleryPage = ({ data }) => {
export const query = graphql`
query GalleryPageQuery {
allFile(filter: {
sourceInstanceName: { eq: "gallery" }}) {
sourceInstanceName: { eq: "gallery" }}
sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken}
) {
edges {
node {
relativePath,
@@ -73,7 +63,7 @@ query GalleryPageQuery {
},
gatsbyImageData(
layout: CONSTRAINED,
width: 650
height: 400
)
fields {
imageMeta {

4
gatsby/src/utils.js
View File

@@ -2,4 +2,6 @@ export const getMeta = (image) => image.childImageSharp.fields.imageMeta;
export const getName = (image) => getMeta(image)?.iptc.object_name || image.base;
export const hasName = (image) => Boolean(getMeta(image)?.iptc.object_name);
export const hasName = (image) => Boolean(getMeta(image)?.iptc.object_name);
export const getAspectRatio = (image) => image.childImageSharp.fluid.aspectRatio;