Overview

The goal of this page is to show how to create a web gallery for the photos scanned with the Epson FastFoto scanner. The gallery should show the photos in chronological order just like the photo albums. However, because photos are filed by year and month, that in turn becomes alphabetically sorted by computers, thus losing their chronological sorting.

We'll organize them by album and then use a script to sort them by their prefixes.

click me

Beginning with FastFoto

When you scan the photos, it's much easier if you can assign the month and year to them. From there, FastFoto organizes the scans into folders based on the date. Additionally, the photos will contain date information known as 'exif' data.

Once you have scanned photos, I prefer to upload them to the web server. That way all the steps below can be performed on the server and only that initial upload is necessary.

I use rsync to copy the folder contents onto the web. Here's an example of an rsync command that will mirror the 'FastFoto' album onto your server.

rsync -av --progress /home/username/Documents/FastFoto/ houston.family:/home/username/public_html/houston.family/FastFoto/

One Album at a Time

Copy the folders containing all of the album's pictures into a separate folder. In my case, I'm copying the following folders into 'album21':

• 1997_August_
• 1997_December_
• 1997_July_
• 1997_November_
• 1997_October_
• 1997_September_

All of the files within have unique filenames given that their prefixes match the folder they're in. Knowing that, it's safe to move all the nested files into the root folder. At the same time, we will discard the version of the photos that has not been enhanced. Don't worry, they are safe in the source folder 'FastFoto'.

protip: the highlighted words have a dropdown triangle for more content

• create python script move.py in folder 'album21' how?

• copy the contents of that to your clipboard

#!/usr/bin/env python3

from pathlib import Path
import shutil

root = Path(".")

# 1. Move enhanced photos to root
for file in root.rglob("*_a.jpg"):
	if file.parent == root:
		continue

	destination = root / file.name

	if destination.exists():
		print(f"SKIPPED duplicate: {file} -> {destination}", flush=True)
		continue

	shutil.move(str(file), str(destination))
	print(f"Moved: {file} -> {destination}", flush=True)

# 2. Delete unenhanced jpg files
for file in root.rglob("*.jpg"):
	if file.parent == root and file.name.endswith("_a.jpg"):
		continue

	file.unlink()
	print(f"Deleted: {file}", flush=True)

# 3. Remove empty folders, deepest first
for folder in sorted(root.rglob("*"), key=lambda p: len(p.parts), reverse=True):
	if folder.is_dir():
		try:
			folder.rmdir()
			print(f"Removed empty folder: {folder}", flush=True)
		except OSError:
			pass

cat > move.py

Type that, paste clipboard contents ctrl + v, and then ctrl + d (may have to hit ctrl + d twice)

• run move.py how?

• create 'img' and 'og' folders and move all photos into it.

mkdir -p og && mv *.jpg og/ && mkdir -p img && mv og/ img/

Resize Photos

Now we will create various sizes of all the photos. This is so photos can load quickly on the web and to give some options for when they're saved to devices. These are my standard sizes based on the longest dimension:

• sm: 480
• md: 960
• lg: 1920

• create and run resize.py

#!/usr/bin/env python3

import os
from PIL import Image, ImageOps

SRC_DIR = "og"

SIZES = {
    "sm": 480,
    "md": 960,
    "lg": 1920
}

EXTS = (".jpg", ".jpeg", ".png", ".webp", ".tif", ".tiff")

def resize_image(img, target_size):
    w, h = img.size

    if h > w:
        # Portrait: resize by height
        ratio = target_size / h
        new_width = int(w * ratio)
        new_height = target_size
    else:
        # Landscape or square: resize by width
        ratio = target_size / w
        new_width = target_size
        new_height = int(h * ratio)

    return img.resize((new_width, new_height), Image.LANCZOS)

def main():
    if not os.path.isdir(SRC_DIR):
        print("Missing 'og' folder")
        return

    for size in SIZES:
        os.makedirs(size, exist_ok=True)

    for filename in os.listdir(SRC_DIR):
        if not filename.lower().endswith(EXTS):
            continue

        src_path = os.path.join(SRC_DIR, filename)

        try:
            with Image.open(src_path) as img:
				# Apply Finder/Mac orientation before resizing
                img = ImageOps.exif_transpose(img)
                img = img.convert("RGB")

                for folder, target_size in SIZES.items():
                    resized = resize_image(img, target_size)
                    out_path = os.path.join(folder, filename)
                    resized.save(out_path, quality=90, optimize=True)

                print(f"Processed: {filename}")

        except Exception as e:
            print(f"Error with {filename}: {e}")

if __name__ == "__main__":
    main()

Gallery Time

• run the big gallery.html-generating python script

from pathlib import Path
from PIL import Image
from collections import defaultdict
import csv

# === CONFIG ===
BASE_DIR = Path(".")
LG_DIR = BASE_DIR / "lg"
MD_DIR = BASE_DIR / "md"
PREFIX_CSV = BASE_DIR / "prefixes.csv"
OUTPUT_HTML = "gallery.html"

ALBUM_PATH = "img"
NUM_COLUMNS = 3

# === LOAD PREFIX ORDER ===
prefix_order = []

with PREFIX_CSV.open(newline="", encoding="utf-8") as csvfile:
    reader = csv.reader(csvfile)
    for row in reader:
        if len(row) >= 2:
            prefix_order.append(row[1])

# === COLLECT FILES ===
all_filenames = [
    f.name for f in LG_DIR.iterdir()
    if f.is_file() and f.name.endswith("_a.jpg")
]

# === GROUP FILES BY PREFIX ===
prefix_map = defaultdict(list)

for filename in all_filenames:
    for prefix in prefix_order:
        if filename.startswith(prefix):
            prefix_map[prefix].append(filename)
            break

# === CREATE ONE CHRONOLOGICAL LIST ===
ordered_filenames = []

for prefix in prefix_order:
    batch = sorted(prefix_map[prefix])
    ordered_filenames.extend(batch)

# === HELPER: BUILD IMAGE TAG ===
def build_tag(filename):
    md_path = MD_DIR / filename

    try:
        with Image.open(md_path) as img:
            width, height = img.size
    except Exception as e:
        print(f"Skipping {filename}: {e}")
        return None

    return (
        f'<a href="{ALBUM_PATH}/lg/{filename}" class="gallery-link">'
        f'<img src="{ALBUM_PATH}/md/{filename}" '
        f'loading="lazy" class="img-fluid my-2" '
        f'width="{width}" height="{height}"></a>'
    )

# === BUILD SINGLE-COLUMN MOBILE TAGS ===
mobile_tags = []

for filename in ordered_filenames:
    tag = build_tag(filename)
    if tag:
        mobile_tags.append(tag)

# === BUILD DESKTOP ROUND-ROBIN COLUMNS ===
columns = [[] for _ in range(NUM_COLUMNS)]

for i, filename in enumerate(ordered_filenames):
    tag = build_tag(filename)
    if tag:
        columns[i % NUM_COLUMNS].append(tag)

# === BUILD HTML FRAGMENT ===
html = []

html.append('    <div class="d-lg-none d-xl-none">')
html.append('        <div class="row text-center">')
html.append('            <div class="col mx-auto">')
html.append('                ' + '\n                '.join(mobile_tags))
html.append('            </div>')
html.append('        </div>')
html.append('    </div>')

html.append('    <div class="d-none d-lg-block d-xl-block">')
html.append('        <div class="row">')

for idx, col in enumerate(columns, start=1):
    html.append(f'            <div id="column{idx}" class="col-4 g-3">')
    html.append('                ' + '\n                '.join(col))
    html.append('            </div>')

html.append('        </div>')
html.append('    </div>')

# === WRITE OUTPUT ===
Path(OUTPUT_HTML).write_text('\n'.join(html), encoding="utf-8")

print(f"Wrote {OUTPUT_HTML} with {len(ordered_filenames)} images.")

scp houston.family:/home/username/public_html/houston.family/login/albums/22/gallery.html .

Files for Downloading

I package the 1920 px-sized photos in a zipped folder called album21-sm.zip. And then I package the original-sized photos in a zipped folder called album21-lg.zip. These sizes aren't to be confused with the intended-for-web sized photos 😆😆😆.

From the terminal, cd into the appropriate folder, 'lg' for example. Then:

zip -r ../../files/album21-sm.zip .

Check the size of the files

ls -lh

Send It

Prepare the index.html then push it to the folder

rsync -av --progress /home/username/Documents/Websites/houston.family/21/dist/index.html \
houston.family:/home/username/public_html/houston.family/login/albums/21/

Cleanup

MacOS creates hidden files. These slow down uploading, syncing, and zipping times. Remove them with this command.

find static/img \( -name '._*' -o -name '.DS_Store' \) -type f -delete

All the file generating tends to create files without proper permissions. So from the root of the albums folder, run this command.

find . -type f ! -perm 644 -exec chmod 644 {} +
find . -type d ! -perm 755 -exec chmod 755 {} +

Sometimes I need to count files

find . -type f | wc -l