All posts tagged website

If you’ve ever uploaded a folder full of images to your web server, seeing the directory listing of all the filenames is less than ideal, as you can’t preview any of the images without clicking through on them. Here is a quick one-liner to generate an index HTML page for all the images:

for i in *.jpg; do echo "<img src=\"$i\" width=\"640\" /><br />" >> index.html; done

Unfortunately, that will cause your browser to load up the full-size version of every image into RAM. If you’ve got a lot of photos, especially if they are very large files straight from your DSLR, you’ll probably start swapping. To fix this, we first use the mogrify command from the ImageMagick suite to generate thumbnails from all your images. Here, we assume that your source images are all in JPEG format, so we can easily use identically-named PNG files for our thumbnails:

mogrify -format png -thumbnail 640 *.jpg

Then, we can use a slightly-modified version of the loop above to generate the HTML:

for i in *.jpg; do BASE="`basename "$i" .jpg`"; echo "<a href=\"$i\"><img src=\"$BASE.png\" /></a><br /><br />" >> index.html; done

Adjust the size of the images by changing the “640” above to whatever image width you like.