commit 0669cd273b14358a58f8000208875c547b690e0a
parent 4012b4dc030299dcad8eada8dd4b25162d4e1ad3
Author: David Eisinger <[email protected]>
Date: Mon, 12 Feb 2024 17:15:43 -0500
add dithering example
Diffstat:
5 files changed, 42 insertions(+), 5 deletions(-)
diff --git a/bin/encrypt b/bin/encrypt
@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+file = ARGV.pop || raise("please supply a filename")
+
+raise("file '#{file}' does not exist") unless File.exist?(file)
+
+%x(
+ openssl \
+ aes-256-cbc \
+ -in #{file} \
+ -out #{file}.enc \
+ -pass file:secret.key \
+ -iter 1000000
+)
diff --git a/content/journal/encrypt-and-dither-photos-in-hugo/index.md b/content/journal/encrypt-and-dither-photos-in-hugo/index.md
@@ -46,7 +46,14 @@ Most of what I post on this site are these monthly [dispatches][6] that start wi
I tried treating the full-size images with ImageMagick on the command line and then letting Hugo resize the result, but I wasn't happy with the output -- there's still way too much data in a dithered full-sized image, so when you scale it down, it just looks like a crappy black-and-white photo. Furthermore, the encoding wasn't properly optimizing for two-color images and so the files were larger than I wanted.
-I needed to find some way to scale the images to the appropriate size and _then_ apply the dither. Fortunately, Hugo has the ability to [fetch remote images][9], which got me thinking about a separate image processing service. After a late night of coding, I've got a solution I'm quite pleased with. Read on for more details, and if you want to follow along, you'll need to have Ruby installed (I recommend [asdf][10] if you're on a Unix-y OS) as well as ImageMagick and OpenSSL.
+I needed to find some way to scale the images to the appropriate size and _then_ apply the dither. Fortunately, Hugo has the ability to [fetch remote images][9], which got me thinking about a separate image processing service. After a late night of coding, I've got a solution I'm quite pleased with.
+
+Here's a picture of me, before and after dithering:
+
+{{<thumbnail race_121539.jpg "782x900" />}}
+{{<dither race_121539.jpg "782x900" />}}
+
+ Read on for more details, and if you want to follow along, you'll need to have Ruby installed (I recommend [asdf][10] if you're on a Unix-y OS) as well as ImageMagick and OpenSSL.
[9]: https://gohugo.io/content-management/image-processing/#remote-resource
[10]: https://asdf-vm.com/
@@ -86,7 +93,7 @@ end
### 2. Build a tiny image server
-I wrote a [very simple image server][13] using [Sinatra][14] and [MiniMagick][15] that takes a path to an image and an optional geometry string and returns a dithered image. I won't paste the entire file here but it's really pretty short and simple.
+I made a [standalone image server][13] using [Sinatra][14] and [MiniMagick][15] that takes a path to an encrypted image and an optional geometry string and returns a dithered image. I won't paste the entire file here but it's really pretty short and simple.
[13]: https://github.com/dce/davideisinger.com/blob/bf5238dd56b6dfe9ee2f1d629d017b2075750663/bin/dither/dither.rb
[14]: https://sinatrarb.com/
@@ -112,9 +119,8 @@ Then, assuming you have an encrypted image at `content/path/to/file.jpg.enc`, yo
We need to tell Hugo where to find our image server, which we'll supply with an environment variable. First, we'll give Hugo access to `DITHER_SERVER` in `config.toml`:
```toml
-[security]
- [security.funcs]
- getenv = ['DITHER_SERVER']
+[security.funcs]
+getenv = ['DITHER_SERVER']
```
Then start Hugo like this:
diff --git a/content/journal/encrypt-and-dither-photos-in-hugo/race_121539.jpg b/content/journal/encrypt-and-dither-photos-in-hugo/race_121539.jpg
Binary files differ.
diff --git a/content/journal/encrypt-and-dither-photos-in-hugo/race_121539.jpg.enc b/content/journal/encrypt-and-dither-photos-in-hugo/race_121539.jpg.enc
Binary files differ.
diff --git a/themes/v2/layouts/shortcodes/thumbnail.html b/themes/v2/layouts/shortcodes/thumbnail.html
@@ -0,0 +1,17 @@
+{{ $orig := .Page.Resources.GetMatch (.Get 0) }}
+{{ $options := .Get 1 }}
+
+{{ $img := $orig.Resize $options }}
+
+{{ if findRE `\d+x\d+` $options }}
+ {{ $img = $orig.Fill (printf "%s center" $options) }}
+{{ end }}
+
+<a href="{{ $orig.RelPermalink }}">
+ <img src="{{ $img.RelPermalink }}" width="{{ $img.Width }}" height="{{ $img.Height }}">
+ {{ with .Inner }}
+ <figcaption>
+ {{ . }}
+ </figcaption>
+ {{ end }}
+</a>
