Skip to content
🖼 Universal JavaScript app, made with ECMAScript modules
JavaScript CSS
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.
_api
_archives
_pictures
_public
components
create
css
helpers
layouts
machines
pages
.gitignore
.node-version
LICENSE
README.markdown
_config.js
_secret_albums.json.example
build.js
client.js
glitch_README.markdown
netlify.toml
package-lock.json
package.json
server.js

README.markdown

Picture Gallery beta

This is a work in progress 🚧

I’m using it to practice with new tools and to share photos with friends 🦊 🐶

How to make your own gallery

Quick start

You can remix this Glitch to make your own gallery 🎏

Automation

If you have a lot of images, you can use this GitHub project to automatically generate different image sizes and data for your albums and then publish them as a static web site.

Here are the basic steps:

  1. Install Node 12.13.1 LTS or newer
    https://nodejs.org

  2. Install GraphicsMagick
    http://www.graphicsmagick.org

  3. Install ImageOptim
    https://imageoptim.com

  4. Clone this project with Git (or download it)

  5. Add your pictures to the _pictures folder, grouped by album name

_pictures/
    your-album-name/
        original/
            1.jpg
            2.jpg
            3.jpg
    your-other-album-name/
        original/
            1.jpg
            2.jpg
            3.jpg
  1. Add information about your gallery and featured albums to _api/index.json
{
  "title": "Travel pictures",
  "date": "2016 to 2019",
  "albums": [
    "your-album-name",
    "your-other-album-name"
  ]
}
  1. Open your project folder in a terminal and install dependencies:
npm install
  1. Create data and responsive images
npm run create
  1. Start the server
npm start
  1. Visit http://localhost:5000

To stop the server, press “control C”

Editing

You can edit the .json files that were created for you in the _api folder. For example, you may want to change the album names and add dates.

"title": "Japan in Winter",
"date": "February & March, 2016",

After you make changes, you may need to stop (press “control C”) and restart the server npm start.

It’s okay to commit the generated files in these folders:

_api
_archives
_pictures

These files are your data and will only change if you re-run the npm run create script or edit them yourself.

How to publish your gallery

The build command will create a _site folder that can be published on any web server.

npm run build

You can browse the static site with this command:

npm run serve

And then visit http://localhost:5000

You can publish your copy of this project to a static host like Netlify using these settings:

Build command
npm run build

Publish directory
_site/

This will automatically rebuild and publish your site as you push changes to your copy of this GitHub repository.

Deploy to Netlify

Secret albums

If you want to publish an album to share with friends without making it public, create a file called _secret_albums.json and add your album name to it (instead of adding it to the index.json file). That way, it won’t appear on the home page of your picture gallery site.

[
  "my-secret-album-name"
]

To make the album name hard to guess, you may want to include a UUID as part of the name. For example:

[
  "my-secret-album-name-0c64f7ea-ad3d-4101-b379-fb5098aed301"
]

You can also ask search engines not to index your album by setting hideFromSearchEngines to true in the JSON file for your album.

{
  "uri": "my-secret-album-name-0c64f7ea-ad3d-4101-b379-fb5098aed301",
  "title": "My Secret Album",
  "date": "February & March, 2016",
  "hideFromSearchEngines": true,
}

This will add a noindex meta element to your page.

You may also want to make your repository private, if your gallery is stored in a public place like GitHub.

Image file storage

You may also want to use Git LFS, if your repository is getting close to 1 GB in size. See GitHub disk quota

How to move existing files into Git LFS

Here are some commands that I used to migrate large files to Git LFS, when they were already in my Git commit history.

$ git lfs migrate import --everything --include="*.jpg,*.png,*.zip"
$ git status
$ git push --force-with-lease

State machine visualization

https://xstate.js.org/viz/?gist=18995ef2fca6c1949991f21b1b68c6d0

xstate

Project goals

This project is an experiment to see how easily the following goals can be achieved in a reactive single-page application on the web…

User experience

  • Essential content/features are available in any web browser
  • Browser features (like forward/back and bookmarks) are supported
  • Site is just as accessible as it would be with static HTML and page refreshes
  • Site is just as findable by search engines and archivable as it would be if it were made of static HTML pages
  • First page renders as quickly as static HTML
  • The application works well on a slow network
  • The application has cues that are equivalent to a normal browsing experience, like a page loading indicator
  • The application is still usable when things go wrong, like if a CSS file doesn’t load or a JavaScript error happens
  • Gesture-driven animations and transitions between pages can be added

Editor experience

  • Content can be created with a simple language like markdown
  • Content can be added, edited and removed using a simple mechanism like files and folders
  • The gallery can be hosted anywhere and kept private, if desired

Developer experience

  • The application’s logic is easy to understand and reason about (Thanks XState!)
  • Large features can be broken up into smaller components and modules
  • Code for templates and logic can be used on the client or server side
  • The application can be continuously deployed in a way that is reliable, scalable and secure
  • New features can be added with confidence that things won’t break
  • The code is easy to read
  • The app can be ported to another framework without too much rework

Helpful resources

These projects and guides were super helpful to me while working on the gallery…

You can’t perform that action at this time.