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

Sort photos by date and better portrait layout for landscape images

Browse Source
This commit is contained in:
Chuck Dries 2021-06-19 22:42:12 -07:00
parent 17e6f300c1
commit ea16527da7
3 changed files with 53 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
gatsby-node.js
View File

@ -164,8 +164,11 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
} }
// Create pages for each markdown file. // Create pages for each markdown file.
const galleryImageTemplate = path.resolve('src/components/GalleryImage.js'); const galleryImageTemplate = path.resolve('src/components/GalleryImage.js');
const edges = R.sort((edge) => // const diffDate = (a, b) =>
new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'], edge)), // new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'], a)).getTime() - new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'],b)).getTime();
const edges = R.sort(R.descend((edge) =>
new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'], edge))),
galleryImages.data.allFile.edges); galleryImages.data.allFile.edges);
console.log(R.map(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken']), edges)); console.log(R.map(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken']), edges));

71
src/components/GalleryImage.js
View File

@ -99,36 +99,57 @@ const GalleryImage = ({ data, pageContext }) => {
// minHeight: '500px', // minHeight: '500px',
}} /> }} />
</div> </div>
<div className={classnames('flex-shrink-0 mx-2 flex flex-row', ar <= 1 && 'pt-5 flex-col flex-auto text-right')}> <div className={classnames(
'flex-shrink-0 mx-2 flex flex-row portrait:items-end', ar <= 1
? 'pt-5 flex-col flex-auto text-right'
: 'portrait:pt-5 portrait:flex-col portrait:text-right'
)}>
<div className="flex-auto mr-2"> <div className="flex-auto mr-2">
<p className="text-muted-light font-mono text-sm m-0 mt-1">{image.base}</p> <p className="text-muted-light font-mono text-sm m-0 mt-1">{image.base}</p>
{hasName(image) && <h1 className="text-4xl mt-0 font-serif">{name}</h1>} {hasName(image) && <h1 className="text-4xl mt-0 font-serif">{name}</h1>}
<p className="mr-2">{meta.iptc.caption}</p> <p className="mr-2">{meta.iptc.caption}</p>
</div> </div>
{(locationString) && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')} title="location"> {<div className="portrait:border-t-2 border-gray-200 portrait:mt-2 mr-3 portrait:mb-1" style={{width: 30}}></div>}
<span className="icon-offset mr-1"> {(locationString) &&
<ion-icon name="location-sharp"></ion-icon> <div className={classnames('flex items-baseline ml-2 text-lg',
</span> ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
<span className="mr-1">{locationString}</span> title="location"
</div>} >
{shutterSpeed && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')} title="shutter speed"> <span className="icon-offset mr-1">
<span className="icon-offset mr-1"> <ion-icon name="location-sharp"></ion-icon>
<ion-icon name="stopwatch-sharp"></ion-icon> </span>
</span> <span className="mr-1">{locationString}</span>
<span className="mr-1">{shutterSpeed}</span> </div>}
</div>} {shutterSpeed &&
{meta.exif.FNumber && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')} title="aperture"> <div className={classnames('flex items-baseline ml-2 text-lg',
<span className="icon-offset mr-1"> ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
<ion-icon name="aperture-sharp"></ion-icon> title="shutter speed"
</span> >
<span className="mr-1">f/{meta.exif.FNumber}</span> <span className="icon-offset mr-1">
</div>} <ion-icon name="stopwatch-sharp"></ion-icon>
{meta.exif.ISO && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')} title="ISO"> </span>
<span className="icon-offset mr-1"> <span className="mr-1">{shutterSpeed}</span>
<ion-icon name="film-outline"></ion-icon> </div>}
</span> {meta.exif.FNumber &&
<span className="mr-1">{meta.exif.ISO}</span> <div className={classnames('flex items-baseline ml-2 text-lg',
</div>} ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
title="shutter speed"
>
<span className="icon-offset mr-1">
<ion-icon name="aperture-sharp"></ion-icon>
</span>
<span className="mr-1">f/{meta.exif.FNumber}</span>
</div>}
{meta.exif.ISO &&
<div className={classnames('flex items-baseline ml-2 text-lg',
ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
title="shutter speed"
>
<span className="icon-offset mr-1">
<ion-icon name="film-outline"></ion-icon>
</span>
<span className="mr-1">{meta.exif.ISO}</span>
</div>}
</div> </div>
</div> </div>
<div></div> <div></div>

2
src/pages/photogallery.js
View File

@ -56,7 +56,7 @@ export const query = graphql`
query GalleryPageQuery { query GalleryPageQuery {
allFile(filter: { allFile(filter: {
sourceInstanceName: { eq: "gallery" }} sourceInstanceName: { eq: "gallery" }}
sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken} # sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken}
) { ) {
edges { edges {
node { node {