cyclenerd / gallery_shell

📷 Bash Script to generate static responsive image web galleries.

gallery.sh

Bash Script to generate static web galleries. No server-side programs (i.e. PHP, MySQL) required.

Overview

gallery.sh is simple bash shell script which generates static html thumbnail (image, photo) galleries using the convert and jhead command-line utilities. It requires no special server-side script to run to view image galleries because everything is pre-rendered.

It offers several features:

• Responsive layout
• Thumbnails which fill the browser efficiently
• Download the original image file
• Nice and simple Bootstrap CSS layout
• Locally previewable galleries by accessing images locally (e.g. file:///home/nils/pics/gallery/index.html)
• JPEG header EXIF data extraction
• Auto-rotation of vertical images

This combination of features makes a better user experience than pretty much all the big online photo hosts. All you need is a place to host your plain html and jpeg files. This can also be Amazon S3.

Installation

Download Bash script gallery.sh:

curl -O "https://raw.githubusercontent.com/Cyclenerd/gallery_shell/master/gallery.sh"

Requirements

• ImageMagick for the convert utility.
• JHead for EXIF data extraction

On a debian-based system (Ubuntu), just run:

sudo apt install imagemagick jhead

Under macOS you can install it with...

MacPort:

sudo port install imagemagick jhead

Homebrew:

brew install imagemagick jhead

Usage

gallery.sh [-t <title>] [-d <thumbdir>] [-h]:
	[-t <title>]     sets the title (default: Gallery)
	[-d <thumbdir>]  sets the thumbdir (default: __thumbs)
	[-h]             displays help (this message)

Example: gallery.sh or gallery.sh -t "My Photos" -d "thumbs"

gallery.sh works in the current directory. Just load the index.html in a browser see the output.

The directory should contain a bunch of JPEG (.jpg or .JPG) files. It does not work recursively. ZIP files (.zip or .ZIP) and movies (.mov, .MOV, .mp4 or .MP4) are also considered. They appear as a download button in the gallery.

Hint

Create a Bash alias for gallery.sh.

Open the ~/.bash_profile, ~/.bashrc or ~/.bash_aliases in your text editor:

nano ~/.bash_aliases

Add your alias:

alias gallery='/home/nils/gallery_shell/gallery.sh'

Demo

This demo page is generated with GitHub Action: https://cyclenerd.github.io/gallery_shell/

Screenshots

License

GNU Public License version 3. Please feel free to fork and modify this on GitHub (https://github.com/Cyclenerd/gallery_shell).

gallery_shell's Issues

PNG and GIF images.

Hello, will PNG and GIF images be supported by online viewing? At present, it can only view JPG images.

Atom Image Feed?

Hi Nils,

have you considered photo feeds like https://git.sr.ht/~mro/Photos2Atom to separate image preparation and viewing UX? The latter is bothering me quite a bit and I want subscribeable galleries.

Cheers, Marcus

Requestions gif-autoplay, adapting grid view style; show videos as thumbnails

Hi Nils,

great application! I was searching for something like this for days now :)

I want to change some of the code to view the images like this style: https://masonry.desandro.com/

Also I want to change that the Video Files will be previewed with Thumbnails (like images) and that the gifs autoplay in the overview section.

So why i am telling you this and not changing it by myself. I am a relativly newbie to this topic.
Can you give me some hints where to start right with these changes? :)

kind regards!

Video Version is Released (Static Video Gallery Generator Bash)

visit this repo for source:
https://github.com/rojenzaman/video-gallery-generator_bash

Demo Web Site:
https://rojenzaman.github.io/video-gallery/

adapted from gallery_shell project

index.html layout is affected by different image sizes

Hi!
I have images in 3:2 and 16:9 proportions in one directory. After running the gallery_shell script, I have an irregular looking layout in index.html, with images (almost?) overlapping.
I do not have the skill to fix this. Can you?
Thanks.

How to make it always display 3 columns?

I'm not very good with css. What I want is to always have 3 column layout regardless of screen size (including on mobile) instead of cutting columns on smaller screens, and adjust the displayed image size so it fits well. Have no idea how to do this with this bootstrapped css.