JoeTrubenstein / gatsby-starter-material-album

A Gatsby and Material UI image gallery

Gatsby Material Album

Features

• Material UI styling
• Pagination
• Exif data parsing

About

I've been a big fan of the way Gatsby creates blog post pages dynamically via Markdown files.

So I figured why not apply the same logic to images in a gallery?

This starter uses the Gatsby Node APIs to accomplish two things.

• It creates a new page from each image file,

• and creates custom node fields so their exif data can be accessed via GraphQl.

Getting Started

Either clone the repo with

git clone https://github.com/JoeTrubenstein/gatsby-starter-material-album.git

Or use the Gatsby CLI

gatsby new material-album https://github.com/JoeTrubenstein/gatsby-starter-material-album.git

then simply run

yarn

to install dependencies

Adding your own images

This project reads a given image's exif data using fast-exif.

However, you'll need to edit your own image's exif data first.

The best way of accomplishing this appears to be ExifTool.

Once installed, you can quickly edit your exif data via the CLI as such:

exiftool -ImageDescription="by Mike Gorrell" -DocumentName="Lost In Thought" -Copyright="https://unsplash.com/@mikegorrell" src/images/mike-gorrell-61cMb0WQAMA-unsplash.jpg

Built With

Gatsby

Material-UI

Based On

Material UI Gatsby Starter

Material UI Album Template