Skip to content
A Gatsby and Material UI image gallery
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
plugins/gatsby-plugin-top-layout first Aug 4, 2019
src Capitalize component name in Footer.js Jan 1, 2020
.gitignore
README.md updated README Oct 12, 2019
gatsby-config.js
gatsby-node.js updated README Oct 12, 2019
package.json
yarn.lock bump serialize-javascript Dec 11, 2019

README.md

Gatsby Material Album

Netlify Status

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

You can’t perform that action at this time.