This explains how I created this image gallery. When I drag a picture into a certain folder on my hard drive, the image automatically appears in this online gallery!

One of the few things I still like about dropbox is that you can link people to a folder to display an image gallery, but dropbox always displays an annoying pop-up to try to get people to sign up. So I'm going to try making my own auto-upload gallery, where you can just drag a picture into a folder and it'll instantly be online in a gallery.

The HTML is very simple and self-contained. I can have a NodeJS script generate the thumbnails using ImageMagick and create a fileList.txt and then the HTML has JavaScript that can read it.

I tried using IrfanView to generate thumbnails, but it removes alpha channels from PNG images.

But it turns out that ImageMagick will preserve alpha channels if you generate thumbnails using its "mogrify" command.

The checkerboard pattern is a fancy CSS gradient with sudden changes in color.

The folders are SVG's that are inlined into the CSS using url("data:image/svg+xml;utf8, ... ")
Probably Don't Base64 SVG

For some reason, images wrapped in link tags tend to have this annoying gap added underneath them. It's not margin OR padding so I'm stumped about what's causing it. Maybe something to do with how I'm scaling the thumbnails proportionally?

I can hide the gap using a negative margin and add padding to keep everything below it in the same place. Yeah 0.4 picas may be a magic number but it seems to work reliably at any view scale.

Wait, there's a better way! Just change the picture's "vertical-align" to any value. (except "baseline")

It turns out that weird gap under the pictures is caused by a font thing called "descenders". Lowercase letters like "g" and "y" hang down a little under the line of text and the web browser automatically makes room for these when you wrap anything in an HTML link, because it assumes that links always have text. There are a bunch of ways to fix this in the CSS style sheet.

Clicking the thumbnail images opens the full-size pic in a separate tab. Clicking on the file name immediately downloads it to your default download folder. You can make links do this by adding an attribute called "download" to the <a> tag.

If I add a folderList.txt I can also display links to other folders, which can also contain an index.htm file. That could be another gallery or a normal web page.

I think what I'll do is use SecondCopy to automatically copy my gallery folder when files change to another spot on my HD, and then make ImageMagick replace the copied pics with smaller versions, then tell WinSCP to sync that folder to the server.

SecondCopy is a backup program that can run a script after copying files, but it can't pass any parameters to the script. So I'll just have my script recursively shrink larger images in the "upload" folder, hopefully without recompressing existing ones.

Figured out how to recursively replace pics with smaller versions.
for /r "%thisfolder%" %%G in (*.jpg) do mogrify -resize "800x800>" "%%G"
Requires ImageMagick to be installed. Always backup your stuff before trying anything recursive.

Just realized this whole thing can be MUCH simpler. If I create an .htaccess file and tell it to automatically use a custom HTML file for pages lacking an index.htm. The Apache server embeds a file list into the HTML, my gallery can just read THAT.

No need to generate a fileList.txt or folderList.txt. And if I compress the images before uploading them, generating thumbnails won't really be necessary. I kinda like how Twitter lets you drag out "thumbnail" images from the page to download the full-size version.

It didn't take long to adapt the JavaScript to read the server's automatic file-list. You need to turn ON FancyIndexing in the .htaccess file to have enough information on-hand to identify folders.

It might be fun to leave the original file listing visible at the bottom to show that this is an enhanced version of it. But that would be redundant. And the gallery is supposed to be dead-simple by design, so I'll probably hide the listing.