# The Goal

# 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.

# Attempt 1

# 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.

# Download Code

# Thumbnails

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

# Download Code

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

# Okay, I 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.

# Download Code

# "Showing" Transparency

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

# Icons

# The folders are SVG's that are inlined into the CSS using:

url("data:image/svg+xml;utf8, ... ") Probably Don't Base64 SVG

# Eek! A bug!

# 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.

.thumbImage {
	width: 100%
	/* Remove the mysterious gap under wide images */
	margin: -0.4pc;
	padding-top: 0.4pc;

# Wait, there's a better way! Just change the picture's "vertical-align" to any other value besides "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.

# Links

# 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.

# Automatic Sync

# 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.

# Attempt 2

# 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.

# Download Code

# 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.

# Download header.htm

# Download footer.htm

# Sure enough, it all works! And I only need to upload folders with pictures.

# Okay so it turns out WinSCP has a feature called "keepuptodate" which watches a folder and automatically synchronizes it to a remote server when the contents change. Perfect! It won't auto-compress my files. But then again, Dropbox didn't do that either.

# That's how you would temporarily enable syncing. But if you want to do this automatically, you can use a script instead.

# I just tell my computer to automatically run this "start-gallery.cmd" file each time Windows boots, and everything is ready to go. The folder automatically syncs whenever I add files to it.

# start-gallery.cmd

# That CMD file just tells WinSCP run another file in the same folder called "start-gallery-script.txt" which has all the actual instructions.

# start-gallery-script.txt

# Obviously you would change those folder paths for your setup, and you would replace "connection-name" with the name of the connection you saved in WinSCP for your website. WinSCP stays running in the background, watching your folder, with no DOS window visible.