Skip to content
A Gatsby and Material UI image gallery
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
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 updated README Oct 12, 2019
gatsby-node.js updated README Oct 12, 2019
yarn.lock bump serialize-javascript Dec 11, 2019

Gatsby Material Album

Netlify Status


  • Material UI styling
  • Pagination
  • Exif data parsing


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

Or use the Gatsby CLI

gatsby new material-album

then simply run


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="" src/images/mike-gorrell-61cMb0WQAMA-unsplash.jpg

Built With



Based On

Material UI Gatsby Starter

Material UI Album Template

You can’t perform that action at this time.