Gatsby Starter Material Album
A Gatsby and Material UI image gallery
| Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
|---|---|---|---|---|---|---|---|---|---|---|
| Leafpic | 3,244 | 2 years ago | n,ull | gpl-3.0 | Java | |||||
| LeafPic is a fluid, material-designed alternative gallery, it also is ad-free and open source under GPLv3 license. It doesn't miss any of the main features of a stock gallery, and we also have plans to add more useful features. | ||||||||||
| Angular_components | 384 | 160 | 26 | 2 years ago | 51 | March 23, 2021 | 113 | bsd-3-clause | Dart | |
| The official Material Design components for AngularDart. Used at Google in production apps. | ||||||||||
| Material Icon Font | 37 | 4 years ago | 3 | apache-2.0 | HTML | |||||
| Material design icon styles (baseline, outline, round, sharp) built into font weights. | ||||||||||
| Study Snap | 34 | 5 months ago | mit | Dart | ||||||
| 📓📲 Flutter app for managing study materials in form of photos. | ||||||||||
| Relay Gallery | 28 | 5 years ago | 1 | January 31, 2017 | mit | JavaScript | ||||
| A gallery web app using React, Relay and Graphql | ||||||||||
| Tool Gallery 5.1 | 16 | 4 years ago | mit | |||||||
| Materials for ACDH Tool Gallery 5.1 | ||||||||||
| Floral | 14 | 2 years ago | 3 | gpl-3.0 | Java | |||||
| Minimal design gallery app for Android. | ||||||||||
| Material Photo Gallery | 9 | 4 years ago | 4 | JavaScript | ||||||
| a vanilla JavaScript material design photo gallery plugin | ||||||||||
| Ngx Storage Firebaseui | 9 | a year ago | 6 | mit | TypeScript | |||||
| Angular Material UI components for firebase storage | ||||||||||
| Material Photo Gallery | 7 | 7 years ago | JavaScript | |||||||
Alternatives To Gatsby Starter Material AlbumSelect To Compare
Alternative Project Comparisons
Readme
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
Based On
Popular Gallery Projects
Popular Material Projects
Popular User Interface Components Categories
Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Javascript
Material
Gatsby
Gallery
Album
Image Gallery