Glitch Image Gallery

Posted on December 17, 2017

A simple way to share your photos and images with Glitch and the PhotoSwipe library.

Images for the demo gallery were borrowed from this article, courtesy of Magenta.

View source View demo gallery

How to use this project

Step one: Remix

First, open the image-gallery project. Clicking on the project's name reveals a menu, there you can click the Remix This button to create your own copy of the project.

Step 1: Remix

Step two: Add images

Navigate to the assets folder of your project in the navigation pane on the left side. You can drag your images here.

Step 2: Add images

Step three: Enjoy!

Click the Show button next to your project's name on top of the page. This will open your gallery.

If you got stuck along the way, or have any questions, feel free to reach out to me at stefan@fourtonfish.com or @fourtonfish.

Continue below for tips on how to customize your gallery.

If you'd like to protect your gallery with a password, you can do this by updating the .env file which by default looks like this:

TITLE="My image gallery"
DESCRIPTION="This is my image gallery"
#Optional password to protect your gallery
#PASSWORD="password"

Remove the # at the beginning of the password line and change the word password to your actual password.

TITLE="My image gallery"
DESCRIPTION="This is my image gallery"
#Optional password to protect your gallery
PASSWORD="thisismy1234@password"

The content of your .env will be only visible to you, but to further protect your gallery, you can hide the source code of your app using the Advanced Options.

Hide source code

Add description to your images

Unfortunately Glitch doesn't let you add description to your uploaded images, so this will require a bit more work.

When you open the images.js file, it will look something like this:

module.exports = [
  // {
  //   url: 'https://cdn.glitch.com/251d5f74-198e-460c-bf75-e22e768c4d03%2F01.jpg',
  //   imageWidth: 736,
  //   imageHeight: 1084,
  //   imageTitle: 'This is image #1'
  // },
  // {
  //   url: 'https://cdn.glitch.com/251d5f74-198e-460c-bf75-e22e768c4d03%2F02.jpg',
  //   imageWidth: 499,
  //   imageHeight: 613,
  //   imageTitle: 'This is image #2'
  // },
  // {
  //   url: 'https://cdn.glitch.com/251d5f74-198e-460c-bf75-e22e768c4d03%2F04.jpeg',
  //   imageWidth: 2000,
  //   imageHeight: 1126,
  //   imageTitle: 'This is image #3'
  // },
  // {
  //   url: 'https://cdn.glitch.com/251d5f74-198e-460c-bf75-e22e768c4d03%2F03.jpeg',
  //   imageWidth: 2000,
  //   imageHeight: 1333,
  //   imageTitle: 'This is image #4'
  // }
];

The script powering the gallery page will first look inside this file and use the data from here, if available. Since the data is commented out, the script will by default look for images uploaded into the assets folder instead.

So, if you want to add description to your images, you will have to manually update the data inside the images.js. After you upload your images to the assets folder, click on each image and copy the URL and the image dimensions for each file.

Image details

module.exports = [
 {
   url: 'https://cdn.glitch.com/251d5f74-198e-460c-bf75-e22e768c4d03%2F01.jpg',
   imageWidth: 736,
   imageHeight: 1084,
   imageTitle: '"La lutte continue." via magenta.as'
 },
 {
   url: 'https://cdn.glitch.com/251d5f74-198e-460c-bf75-e22e768c4d03%2F02.jpg',
   imageWidth: 499,
   imageHeight: 613,
   imageTitle: '"All power to the people." via magenta.as'
 },
 {
   url: 'https://cdn.glitch.com/251d5f74-198e-460c-bf75-e22e768c4d03%2F04.jpeg',
   imageWidth: 2000,
   imageHeight: 1126,
   imageTitle: '"Love trumps hate." via magenta.as'
 },
 {
   url: 'https://cdn.glitch.com/251d5f74-198e-460c-bf75-e22e768c4d03%2F03.jpeg',
   imageWidth: 2000,
   imageHeight: 1333,
   imageTitle: '"I am a man." via magenta.as'
 }
];