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

more gallery stuff

Browse Source
This commit is contained in:
Chuck Dries 2021-06-13 23:53:55 -07:00
parent 0a98097aaa
commit 5e8ec683e4
3 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gatsby/src/pages/gallery.js
View File

@ -32,6 +32,8 @@ const GalleryPage = ({ data }) => {
<div className="bg-black min-h-screen"> <div className="bg-black min-h-screen">
<h1 className="text-2xl">Gallery</h1> <h1 className="text-2xl">Gallery</h1>
<div className="mx-auto" style={{maxWidth: '1800px'}}> <div className="mx-auto" style={{maxWidth: '1800px'}}>
{/* TODO swap masonry plugin, this one makes really unbalanced columns */}
{/* ...implement manually :sadge: */}
<ResponsiveMasonry <ResponsiveMasonry
columnsCountBreakPoints={{ 350: 1, 650: 2, 1200: 3 }} columnsCountBreakPoints={{ 350: 1, 650: 2, 1200: 3 }}
> >

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

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { graphql } from 'gatsby' import { graphql } from 'gatsby'
import { getMeta, getName } from '../utils'; import { getMeta, getName, hasName } from '../utils';
import { GatsbyImage, getImage } from 'gatsby-plugin-image' import { GatsbyImage, getImage } from 'gatsby-plugin-image'
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import classnames from 'classnames' import classnames from 'classnames'
@ -28,7 +28,6 @@ const GalleryImage = ({ data }) => {
{/* TODO: change layout by amount of empty space on side of page, not aspect ratio? */} {/* TODO: change layout by amount of empty space on side of page, not aspect ratio? */}
<div style={{ margin: '0 5vw' }} className={classnames('flex mx-auto', ar > 1 ? 'flex-col' : 'flex-row-reverse')}> <div style={{ margin: '0 5vw' }} className={classnames('flex mx-auto', ar > 1 ? 'flex-col' : 'flex-row-reverse')}>
<div className='flex-grow-0'> <div className='flex-grow-0'>
<h1 className="text-2xl mt-2">{name}</h1>
<GatsbyImage <GatsbyImage
className="" className=""
loading='eager' loading='eager'
@ -44,6 +43,7 @@ const GalleryImage = ({ data }) => {
alt={name} /> alt={name} />
</div> </div>
<div className={classnames('flex-shrink-0 mr-4', ar <= 1 && 'pt-4 flex-auto text-right')}> <div className={classnames('flex-shrink-0 mr-4', ar <= 1 && 'pt-4 flex-auto text-right')}>
{hasName(image) && <h1 className="text-2xl mt-2">{name}</h1>}
<p>{getMeta(image).iptc.caption}</p> <p>{getMeta(image).iptc.caption}</p>
<p>some other meta</p> <p>some other meta</p>
</div> </div>
@ -67,7 +67,7 @@ export const query = graphql`
layout: CONSTRAINED layout: CONSTRAINED
# placeholder: BLURRED # placeholder: BLURRED
# placeholder: DOMINANT_COLOR # placeholder: DOMINANT_COLOR
# placeholder: TRACED_SVG placeholder: TRACED_SVG
height: 2048 height: 2048
) )
fields { fields {

4
gatsby/src/utils.js
View File

@ -1,3 +1,5 @@
export const getMeta = (image) => image.childImageSharp.fields.imageMeta export const getMeta = (image) => image.childImageSharp.fields.imageMeta
export const getName = (image) => getMeta(image)?.iptc.object_name || image.base export const getName = (image) => getMeta(image)?.iptc.object_name || image.base
export const hasName = (image) => Boolean(getMeta(image)?.iptc.object_name)