https://github.com/phillmac/ipfs-masonry
A gallery for images on IPFS
https://github.com/phillmac/ipfs-masonry
Last synced: about 1 year ago
JSON representation
A gallery for images on IPFS
- Host: GitHub
- URL: https://github.com/phillmac/ipfs-masonry
- Owner: phillmac
- License: gpl-3.0
- Created: 2020-08-23T04:03:52.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-02-25T00:09:59.000Z (over 2 years ago)
- Last Synced: 2024-10-12T12:10:00.124Z (over 1 year ago)
- Language: JavaScript
- Size: 1.9 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# IPFS Masonry
Provides an interface to display a [masonry](https://getbootstrap.com/docs/4.3/components/card/#card-columns) for images hosted on IPFS.
Images are lazy loaded to reduce the strain on the browser.
The galleries are also pinned to a local JS-IPFS node to help with the seeding.
## Customize
### Creating a gallery
You can clone this project and add a `/json/gallery.json` to display a custom gallery.
```json
{
"author": "Elementary OS", // Title at the top of the page
"description": "", // Description of the page
"galleries": [
{
"cidv1": "bafybeicpr27fy2tffc3dxzrhjjsdzzblwjr6njxswejkpd3bsajhtmwfau", // CIDv1 of a gallery
"title": "Wallpapers", // Name of the gallery
"text": "", // Path to a `.md` file
"folders": [
{
"path": ".", // Path of the folder
"images": [ // Name of images
"Ashim DSilva.jpg",
"Carmine De Fazio.jpg",
"Jonas Nilsson Lee.jpg",
"leigh-kendell-581.jpg",
"Luca Bravo.jpg",
"Morskie Oko.jpg",
"Mr. Lee.jpg",
"Pablo Garcia Saldana.jpg",
"Photo by SpaceX.jpg",
"Rob Bye.jpg",
"Ryan Schroeder.jpg",
"Sunset by the Pier.jpg"
]
}
]
}
]
}
```
The `gallery.json` file can contain multiple galleries, and each of them can contain multiple folders.
A gallery is made of a CIDv1, a title, and the path to a markdown file.
A folder contains a path and the name of the contained images.
### Adding a gallery to IPFS
When adding files to IPFS, don't forget to convert the hash from CIDv0 to CIDv1.
```bash
ipfs cid base32 QmP4c9GWcbc1mD8yDcKaNEJNLmGqTND9cJsyEdJizBi3dw
bafybeiakx57a25xqcuqrx2rbm2ugqxeud2i46ejjg3vqodvasqiwwe6pby
```
This is necessary to obtain subdomain-separated URLs. The only known gateway to support them for now is [cf-ipfs.com](https://blog.cloudflare.com/continuing-to-improve-our-ipfs-gateway/).
## Building
### Dependencies
To build this project, you need `hogan.js`.
```bash
npm i -g hogan.js
```
### Build
```bash
./scripts/ipfs.sh
```
The end result should look like this.
There's a preview available [here](https://bafybeih3numjaydnhvwr62pkd75u2wiaj6vmz5ymbhouztij7j42rmuady.cf-ipfs.com/).