Giter VIP home page Giter VIP logo

ipfs-masonry's Introduction

IPFS Masonry

Provides an interface to display a masonry 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.

{
  "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.

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.

Building

Dependencies

To build this project, you need hogan.js.

npm i -g hogan.js

Build

./scripts/ipfs.sh

The end result should look like this.

Gallery

There's a preview available here.

ipfs-masonry's People

Contributors

natoboram avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.