Linux Terminal: Simple Bash HTML Gallery generator

This is where being a linux user gives you a huge advantage over those Microsoft nambies!  Ever cursed those long hours spent writing out a massive HTML document after your client has given you 125 images for a new gallery page on their site?  I know I have, and I’ve got the square eyes and caffeine addiction to prove it.  What if linux could see those images, make a note of their names, and generate the bulk of that HTML for you?  Wouldn’t that be a relief?  Not to mention a massive saving of time and money too.  Well, it can!

This idea is so simple, and so easy to execute that it’s a wonder anyone anywhere is making web pages on a windows machine!  Feel free to laugh at anyone you know who is currently doing so.

Ok, I’m going to make a few assumptions before we start.  The client has sent you the images, and you are happy with the way they are named.  What’s that?  You’re not happy with the file names?  Well fear not – I also have an automated solution to that!  If you’re feeling really plucky, you could write a simple bash script to do this, but you could just download Thunar file manager which allows you to do this through the GUI!

It’s so easy to use, there’s little point in giving instructions, but if you need a place to start, then select all the files to be renamed in Thunar, right click on one, and select rename.  The renaming dialogue will then appear, and you just submit the parameters you require.  For example, I did 2 iterations of this.  Once to make the files all lower case, and once to remove all the spaces and replace them with underscores (_). It’s a sweet piece of cake, baby!

Ok, so you’ve got the images all together with the right names, and in the same directory?  Good.  Next you should generate your thumbnail images, and save them with the same file name in a subdirectory named ‘thumbs’.  You may or may not want to automate this too, but if you do, there’s a batch processing script for GIMP here.

So, the HTML we’re going to generate here is not an entire HTML page – it’s just the long repetitive bit in which you’d be copying and pasting the HTML for each image, and typing the image name in by hand each time – so BORING!  You will need to take the file generated and incorporate it into your page either as a server side include, or just by copying and pasting it.

So, first things first: Make a backup copy of the folder containing your images. Open a terminal, go to the parent directory (one step up from your image directory).  I will assume that your images are in a folder called ‘images’.  Open a terminal and type:

cp -R images/ images_backup/

Ok, that’s the backup created.  Check that it’s worked by typing:

ls

You should see it listed in the terminal window along with your other files and folders.  Ok, next, we need to move into the ‘images’ directory. Simple:

cd images/

Here’s where all the magic happens!  First of all, we need to grab all those image names, and type them all into a text document.  ’What? – You mean I have to type them all out anyway?’  I hear you weep.  Nope, bash will do that for you, so easily.  Type this:

ls > filenames.txt

A new file will appear in your directory called filenames.txt, and it will contain the names of your images, one on each line.  You can check it by typing:

cat filenames.txt

Still with me?  Good.  Now, you’re going to need a text editor for the next bit – you can use whatever you want.  I’m using Geany because it’s what I’m used to, but if you’re feeling very swish you can use vi, or anything you want (please don’t use a word processor though).  Type this into your editor:

#!/bin/bash
var1=’<li><a href=”images/’
var2=’” rel=”lightbox”><img class=”gallery” src=”images/thumbs/’
var3=’” alt=”thumbnail image” /></a></li>’
while read line
do
echo $var1$line$var2$line$var3
done < filenames.txt

And save it as generator.sh . Here’s how it works.  Line 1 says ‘this is a bash script’ – easy.  If bash is located somewhere other than /bin/bash you will need to modify this line to make it work.  Lines 2,3 and 4 assign all the HTML I want to use into three variables, ready to be combined with the filenames.  Lines 5/6 say ‘for each line in the document, do the following’.  Line 7 is where it’s at, though.  It takes the filename in question, and turns it into a valid line of HTML using the variables we assigned in lines 2,3 & 4.  Finally, line 8 says stop when there’s no more lines left in the file, and specifies the document from which to read.

For the finale, we simply ask bash to execute the script using the filenames as input, and squirt it into a nice HTML document for us.  Like so:

bash generator.sh > gallery.html

Your HTML is ready to go, sir!  Would you like fries with that?  Each line of HTML in your document will look like this:

<li><a href=”images/filename.jpg” rel=”lighbox”><img class=”gallery” src=”images/thumbsfilename.jpg” alt=”thumbnail image” /></a></li>

The HTML is designed to work with the html document being saved one level up from the images directory, in order to keep things nice and tidy.  Don’t forget, in my example, I’ve put each image in a list element, so you’d need to make sure the gallery code sits within some <ul></ul> tags.

ttfn!

Filed under: bash, linux