Photo-Gallery 📷🖼️

Description

A simple node.js photo gallery website. It allows users to view, download and upload photos (upload access given with a passcode).

Installation

Clone the repository

Clone the photo-gallery repo from GitHub.

git clone https://github.com/DanielBatesUK/photo-gallery

Then, in the clone's root directory, install required dependencies from npm.

npm install

THe main required dependencies are:

• cookie-parser - GitHub npm
• dotenv - GitHub npm
• exifr - GitHub npm
• express - GitHub npm
• multer - GitHub npm
• pug - GitHub npm
• sharp - GitHub npm
• uuid - GitHub npm

Configure the .env file

Either: Create an new .env file with the following.

cat > .env

Then enter the following variables:

PORT=3000
SESSION_SECRET="Your-Super-Secret-Password-Goes-Here"
PASSCODE="Your-Not-So-Super-Secret-Passcode-Goes-Here"
PATH_UPLOADS="/location/where/to/save/uploaded/photos/goes/here/"
WEB_TITLE="Your-Photo-Gallery-Name-Goes-Here"
WEB_TITLE="Your-Photo-Gallery-Name-Goes-Here"
WEB_CSS="css/default.css"
WEB_ICON_TYPE="image/svg+xml"
WEB_ICON_HREF="images/logo.svg"
ROUTE_INDEX="/"
ROUTE_GALLERY="/gallery"
ROUTE_UPLOAD="/upload"
ROUTE_IMAGES="/images"
VIEW_INDEX="index"
VIEW_GALLERY="gallery"
VIEW_UPLOAD="upload"
PREFIX_THUMBNAILS="thumb_"
PREFIX_PREVIEWS="prev_"
PHOTOS_PER_PAGE=20

With the above press Ctrl + D to save.

Or: Copy the .env.template provided to create your .env file.

cp .env.template .env

IMPORTANT!!!: Before running, you will need, at the very least, to edit these variables in your .env file, to fit your requirements. Please do so with your text editor of choice (nano, vim, etc).

• PORT - The integer port number you want to listen for http requests on. e.g. 3000
• SESSION_SECRET - The string for the secret text that is used when hashing the passcode. e.g My-Super-Secret-Password
• PASSCODE - The string used for the passcode. The passcode is given to the users (by you) that you want to have upload access. It is entered via a form when trying to use the upload page. e.g. My-Secret-Passcode
• PATH_UPLOADS - This string is the pathname of the directory where you want the uploaded photos to be stored. Make a new directory if necessary. The directory can be anywhere accessible on your system. But I would maybe avoid putting them in the '/public' directory of the project. e.g. /location/where/to/save/uploaded/

The other variables can be left as default. Change them if you wish. But here is what they are.

• WEB_TITLE - String used for the title and heading on the webpages. e.g. My Photo Gallery
• WEB_CSS - String for the path to the css file. So you can run multiple instances with different styles.
• WEB_ICON_TYPE & WEB_ICON_HREF - Strings used for page favicon type and path.
• WEB_SIGNATURE - String used for the small footer note at the bottom of all the webpages, accept for the home page. e.g. Photo Gallery 2022
• ROUTE_INDEX - String used for the route of the index/home page. e.g. https​://example.com/
• ROUTE_GALLERY - String used for the route of the gallery page. e.g. https​://example.com/gallery
• ROUTE_UPLOAD - String used for the route of the upload page. e.g. https​://example.com/upload
• ROUTE_IMAGES - String used for the route of the images page. This is the route used for displaying uploaded photos. By default; It is also used in the '/public directory too. e.g. https​://example.com/images
• VIEW_INDEX - String used for the filename of the jade/pug file (in '/views') that used for the index/home page. e.g. index
• VIEW_GALLERY - String used for the filename of the jade/pug file (in '/views') that used for the gallery page. e.g. gallery
• VIEW_UPLOAD - String used for the filename of the jade/pug file (in '/views') that used for the upload page. e.g. upload
• PREFIX_THUMBNAILS - String used as the prefix that tells the '/routes/get*image' script to generate a thumbnail from a upload photo (that is used on the gallery page). Must be different from PREFIX_PREVIEWS. e.g. thumb*
• PREFIX_PREVIEWS - String used as the prefix that tells the '/routes/get*image' script to generate a preview from a upload photo (that is used on the gallery modal). Must be different from PREFIX_THUMBNAILS. e.g. prev*
• PHOTOS_PER_PAGE - Integer used to give the number of photo shown on each page of the gallery. By default, and with the css for the gallery page; this number should be divisible by 4. e.g. 20

Run

After you made sure the .env file is ready you can then start the app with either:

node server.js

or

npm start

Access the photo gallery

Home, Gallery & Upload pages

To access the photo gallery use a web browser and goto the server's ip address and add the port number given with variable PORT in the .env file. e.g. http://192.168.0.100:3000/ or if on the same machine try http://localhost:3000/. If you are running a web server (apache, nginx, etc), maybe consider adding a proxy to your site config files. You can navigate around the three pages using the links in navigation bar/dropdown.

Gallery page

There are pagination links at the bottom of each page of the gallery. With links to first, previous, next and last pages to help you navigate. You can also use a left and right swipe gesture to go to the next and previous pages too.

Clicking on a photo will open a modal displaying a full screen version of that photo. You can download a full resolution image of the photo via the download button (downward arrow with a line). You can also display the next and previous photos via the left and right arrows on the screen (these are removed if viewing on a phone), by using the left and right arrows on your keyboard, or by using a left or right swiping gesture. The next or previous page of the gallery will be loaded automatically if you navigate beyond the bounds of the current gallery page.

Upload page (access via passcode)

When first using the upload page, you will be greeted with a 'Enter passcode' form. This is where you enter the text contained in the PASSCODE variable in your .env file.

You can share a link to the upload page that automatically submits the passcode. You can do this by adding ?p=PASSCODE (replace PASSCODE with your own passcode) to the URL.

Demo

You can look at a (slow performing) demo here: https://photo-gallery-demo.glitch.me/

Fonts

Here's a credit for the designers of the fonts I used.

• Cute Egg - Free for personal use only - by Khurasan

• Hany Petter - Free for personal use only - by StringLabs

• Louis George Cafe - Free for personal and commercial use - by Chen Yining

• Night DEMO - Free for personal use only - by Vilogsign

Story

I was getting married. We thought it would be good idea to have a place where our guests could upload, and share with us their photos; of our special day. Therefore, I made this. And, thankfully, it worked very well for us. I wouldn't dare call myself a 'programmer', I'm just a hobbyist. I have no doubt there are many things I'm doing wrong, or can be done way more efficiently. So I please be kind.

Author

Daniel Bates

• Github: @DanielBatesUK
• Twitter: @DanielBatesUK
• LinkedIn: @DanielBatesUK

License

• Copyright © 2022 Daniel Bates.
• This project is GNU v3.0 licensed.