Introducing PhotoArchive & Launching Photography Site

Date: 29 Dec 2022

• automation
• front-end
• dev-log
• Blog
• post

#post #dev-log #automation #front-end

I always wanted a more comfortable way to post photos. There are many social media platforms, but I just don’t like how they work. I’m pretty sure some people feel the same thing (probably not most people). But the perplexing thing is that I was never able to find a solution I liked—it’s a really simple thing that I’m trying to do. Maybe it’s just because I’m picky… but anyway, according to tradition, let’s build one if we can’t find one. Hopefully, other people find this useful too.

This has been a long-delayed project… its completion felt more like an improvisation after some frustration with posting photos.

Yes, have moved our photos to The Archive powered by this new template. It is up at https://photoarchive.chaosarium.xyz/.

There’s a demo site with placeholder pictures from Unsplash.

Screenshots from my personal photography site.

It is not that I’m obsessed with photography that I wanted a fancy way to post photos… but it was because all other photo publishing pipelines I tried made posting uncomfortable. Here are some reasons why:

• Many of them downscale my photos… even by a factor of 4 (How disappointing!
• Posting on social media feels very awkward as I am kind of forced to be social. Sometimes seeing the like button or the comment box makes me want to quit for some reason—all I wanted was to put my photos somewhere, why all that?…
• And Instagram in particular… shows dreadful ads and meaningless videos that turn my feed into a mess… and why is double tap like instead of zoom in?… It’s almost just doing the opposite of what I want.
• Of course, I can be using things like WordPress or Google Sites, but that would require manual uploads… I would call that… not developer-friendly.

What I wanted:

• Total control over the way I post photos. That means I get to choose what font to use, the design of the page, how much resolution I want, etc.
• The ability to dump photos in a folder and build a website using one line of command. No clicking on buttons and no dragging images around on a site editor.
• A modern, minimal aesthetic that really focuses visitors’ attention on the photos, not the like button.
• Auto arrangement of photos in the gallery—not cheating by fitting them to squares, and not wasting time by having to do that manually.

Considering all these, it seems like a static site generation will do the job.

There are ways to share photos independent of social sites. Some are like cloud drive specific for photos, like Google Photo or the self-hosted Photoview (which isn’t bad at all for what it does). But none of them looked like a real photography site.

There are some static photo gallery generators out there. I have tried hugo-easy-gallery, but looks like it still requires writing shortcodes to add photos—not what I wanted.

I eventually found thumbsup. It is a static photo site generator that does its job in one line of command.

thumbsup --input ./photos --output ./gallery

Though the built-in themes don’t look very nice, it seems like a good enough generator to write a theme for.

And so we just ended up making a theme for thumbsup written with Handlebars, Less, and JavaScript. After an afternoon of development, the PhotoArchive theme was born. I’m definitely more obsessed with CSS than photography, being fully aware that¹:

• lightGallery is great for lightboxes
• Justified-Gallery for automatic arrangements of photos in the gallery
• Fonts from Google Fonts

Barcode of titles for… decoration.

Control bar with toggle buttons for dark mode and blanc and white mode using Remix Icon for toggle buttons.

PhotoArchive is now open source on GitHub. Hopefully, more people can build photography sites like mine without going through all these troubles.

Install thumbsup and its dependencies.

Run npm install moment in the working directory. Time parsing depends on this.

Structure the input folder in a way that folders containing photos are albums. An album is allowed to contain subalbums. Example:

input
├── album1
│   ├── group1
│   │   ├── pic1.jpg
│   │   └── pic2.jpg
│   └── group2
│       ├── pic3.jpg
│       ├── pic4.jpg
│       └── pic5.jpg
├── album2
│   ├── pic6.jpeg
│   ├── pic7.jpg
│   └── pic8.jpg
├── standalone1.jpg
└── standalone2.jpg

Use the IPTC - Content > Description metadata to add captions for photos

Create a config.json file somewhere with the following information:

{
    "input": ".../input", // path to photo input folder
    "output": ".../output", // where to generate output

    // See https://thumbsup.github.io/docs/3-configuration/cheat-sheet/ 
    // for what these do
    "small-size": "300", 
    "large-size": "1200",
    "cleanup": "false",
    "album-page-size": "0",
    "albums-output-folder": "albums",

    // If you want to watermark your photos
    "watermark": ".../watermark.png", // path to watermark png
    "watermark-position": "SouthEast", // location

    "theme-path": ".../archive", // path to the root of this repo

    "title": "PhotoArchive", // Website title
    "footer": "these are placeholder images from unsplash", // website footer

    "dummy": "dummy" // this does nothing (*ﾟ▽ﾟ*)
}

Then run the following to generate static website²

thumbsup --config "path/to/config.json"

Modify any .hbs or .less file.

See thumbsup documentation.

Any platform for deploying static sites should work. Some ideas:

• Netlify
• GitHub Pages
• Wunderbucket
• Vercel

Contributions are welcome! The current theme only implemented those features that I need, which is a subset of what thumbsup is capable of generating. Untested features include:

• video support
• pagination
• (those I did not catch)

Problems with thumbsup that could be addressed

• ugly url with .html ending for album pages.³