Shell script to generate HTML5 gallery

10 Oct 2014

You know that, with the years, some collected digital photos are languish in folders. Although there are all kinds of tools to manage this, but if you want to make it public and you do not want to manually bind in a HTML5 file, you need something that do this binding automatically for you.
For this we use a Bash (shell) script, that can be easily created and modified on Linux / Mac systems.
This script produce several HTML5 files from a flat folder structure that includes an image collection and creates some beautiful sliders based on CSS3. Have a look at the result here on

gallery html5 css3 on

The shell script create a main page which is named "gallery.html" in the folder "photos/", in this file you can see an image for each sub-directory. When you open these link behind an image, you will directed to the picture slider of the sub-directory which is named as "photos/[sub-directory].hmtl". So the name of the sub-directory is also the name of the created HTML5 file. A hyphen in the sub-directory is displayed as a blank sign for the designation (the subfolder "photos/new-york/" is displayed as "NEW YORK"). The folder structure is flat and end with "photos/[sub-directory]/".

The image size is controlled by the CSS3 file and in my setting it is 640 px (Pixel). It is recommended previously to reduce the size of the pictures in any sub-directory folder so that the charging time is reduced on the web. On a Mac you can use this command to reduce the size of each image at once to a maximum high or width of 640 px.
sips -Z 640 *.jpg

Here you can download the script that generates the gallery and the other html files. You can run this script on Linux, Unix or Mac systems. Therefore you have to executable the script with this command.
chmod +x

Now you can run the script with this command.

Make sure that you use the same folder structure that begins with "photos/". The nice thing is now, if you add more pictures and folders, you can simply run it again.

1 comment:

newer post older post home