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

Add forward/back navigation to gallery

Browse Source
This commit is contained in:
Chuck Dries
2021-06-19 13:43:28 -07:00
parent f3195c748a
commit 78e8da5e8e
4 changed files with 56 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/GalleryImage.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { graphql, Link, navigate } from 'gatsby';
import { graphql, navigate, Link } from 'gatsby';
import {
getAspectRatio,
getMeta,
@@ -13,11 +13,11 @@ import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { Helmet } from 'react-helmet';
import classnames from 'classnames';
const GalleryImage = ({ data }) => {
const GalleryImage = ({ data, pageContext }) => {
const image = data.allFile.edges[0].node;
const ar = getAspectRatio(image);
// TODO: metadata icons
console.log(pageContext);
const name = getName(image);
const meta = getMeta(image);
@@ -39,12 +39,30 @@ const GalleryImage = ({ data }) => {
style={getVibrantToHelmetSafeBodyStyle(vibrant)}
/>
</Helmet>
<button
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute"
onClick={() => navigate(-1)}
type="button"
>back</button>
<div className="min-h-screen pt-5 flex flex-col justify-center">
<nav className="mt-0">
<button
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
onClick={() => navigate(-1)}
type="button"
>back</button>
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to="/"
>home</Link>
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to="/photogallery/"
>gallery</Link>
{pageContext.prevImage && <Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to={`/photogallery/${pageContext.prevImage}/`}
>previous</Link>}
{pageContext.nextImage && <Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to={`/photogallery/${pageContext.nextImage}/`}
>next</Link>}
</nav>
<div className="min-h-screen flex flex-col justify-center">
<div className={classnames('flex', orientationClasses)}>
<div className="flex-grow-0">
<GatsbyImage

2
src/pages/index.js
View File

@@ -154,7 +154,7 @@ const IndexPage = ({ data: { allFile: { edges } } }) => {
className={classnames(
'hover:underline inline-block p-3 px-5 my-3 text-lg rounded-md border-2 arrow-right-after font-bold font-serif',
isClient && 'text-muted-dark bg-muted-light hover:border-muted border-muted-dark')}
to="/photogallery"
to="/photogallery/"
>
Photography Gallery
</Link>

18
src/pages/photogallery.js
View File

@@ -1,5 +1,5 @@
import * as React from 'react';
import { graphql } from 'gatsby';
import { graphql, Link } from 'gatsby';
import { navigate } from 'gatsby';
import { Helmet } from 'react-helmet';
@@ -19,13 +19,23 @@ const GalleryPage = ({ data }) => {
<title>Photo Gallery | Chuck Dries</title>
<body className="bg-black text-white" />
</Helmet>
<div className="bg-black min-h-screen 2xl:container">
<nav className="mt-0 mb-4">
<button
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before absolute"
className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before mr-1"
onClick={() => navigate(-1)}
type="button"
>back</button>
<h1 className="text-5xl mt-3 ml-5 font-serif font-black z-10 relative">Photo Gallery</h1>
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to="/"
>home</Link>
<Link
className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
to="/photogallery/"
>gallery</Link>
</nav>
<div className="bg-black min-h-screen 2xl:container">
<h1 className="text-5xl mt-0 ml-5 font-serif font-black z-10 relative">Photo Gallery</h1>
<div className="mx-auto">
<MasonryGallery
images={images}