Glitch Image Gallery

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.

This project was also previously used for the gallery on the Glitch about/resource page.

How to use this project¶

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.

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

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@stefanbohacek.com or @fourtonfish.

Continue below for tips on how to customize your gallery.

Protect your gallery with a password¶

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.

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.

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'
 }
];