I am hitting many of the imposed limits on my free blog. I recently wanted to share a ton of textures, but since they were to big for the free space allowed, I resorted to a little “trick” if you will. I ended up creating a script to generate a huge html thumbnail gallery, using a table. It seemed like the best of the available options.

I had many requirements for the image hosting:

  • Have access to the file directly (and not through a custom downloader).
  • Lossless files (png) that google image bot understands.
  • Metadata conserved (license and keywords).

Since I had way too many files to write the html myself, I created a simple bash script to parse the directory and generate the html table. This isn’t a great idea in the long-term, but considering how limited I am on this blog, it seems OK for a one-time-only deal. Here is the code, just paste it in a .sh file and remember to chmod +x the file.

#!/bin/bash
# Simplified BSD License, View on github
shopt -s nullglob

usage="$(basename "$0") [web address] [png directory] -- program to generate a big html gallery"

echo "<table style='width: 100%;'>
<tbody>" > gallery.html;

i=0;
for f in "$2"/*.png; do
 ((++i))

f="${f##*/}"

name=$f
 name="${name%.*}"
 name="${name//-/ }"
 name="${name//[0-9]}"

if (($i==1)); then
 echo "<tr>" >> gallery.html;
 fi

echo "<td style='height: 200px; text-align: center; font-size: 11px;' align='center'>
 <a href='$1/$f' target='_blank'><img style='margin-top: 12px;' src='$1/Thumbnails/${f%.*}.jpg' alt='$name thumbnail' width='200' height='200' /></a>
 

 <a style='color: #4d4d4d; font-weight: bold; text-decoration: none;' href='$1/$f' target='_blank'>$name</a>
 </td>" >> gallery.html;

if (($i==3)); then
 echo "</tr>" >> gallery.html;
 i=0;
 fi

done;

if (($i!=3)); then
 echo "</tr>" >> gallery.html;
fi

echo "</tbody>
</table>" >> gallery.html;

You call it like this:

./generatehtmlgallery.sh www.example.com/images my/png/folder/

It assumes the thumbnails are in a Thumbnail subfolder on your website. You can change that by adding an argument and using $2 for the thumbnails and $3 for the folder respectively.

I am certainly not a bash expert, but it is a scripting language I like to get accustomed to since I really love bash terminal and do a lot of work in it. This is a nice simple example of what you can easily do with the bash scripting language. I hope this is useful :)

The script is also available on github.