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
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.
const galleryImageTemplate = path.resolve('src/components/GalleryImage.js');
const edges = R.sort((edge) =>
new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'], edge)),
// const diffDate = (a, b) =>
// 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);
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',
}} />
</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">
<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>}
<p className="mr-2">{meta.iptc.caption}</p>
</div>
{(locationString) && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')} title="location">
<span className="icon-offset mr-1">
<ion-icon name="location-sharp"></ion-icon>
</span>
<span className="mr-1">{locationString}</span>
</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">
<ion-icon name="stopwatch-sharp"></ion-icon>
</span>
<span className="mr-1">{shutterSpeed}</span>
</div>}
{meta.exif.FNumber && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && 'flex-row-reverse')} title="aperture">
<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')} title="ISO">
<span className="icon-offset mr-1">
<ion-icon name="film-outline"></ion-icon>
</span>
<span className="mr-1">{meta.exif.ISO}</span>
</div>}
{<div className="portrait:border-t-2 border-gray-200 portrait:mt-2 mr-3 portrait:mb-1" style={{width: 30}}></div>}
{(locationString) &&
<div className={classnames('flex items-baseline ml-2 text-lg',
ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
title="location"
>
<span className="icon-offset mr-1">
<ion-icon name="location-sharp"></ion-icon>
</span>
<span className="mr-1">{locationString}</span>
</div>}
{shutterSpeed &&
<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="stopwatch-sharp"></ion-icon>
</span>
<span className="mr-1">{shutterSpeed}</span>
</div>}
{meta.exif.FNumber &&
<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="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>

2
src/pages/photogallery.js
View File

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