forked from wezm/wezm.net
49 lines
2.3 KiB
HTML
49 lines
2.3 KiB
HTML
Ever since this version of my site went live I've been meaning to
|
|
post about the generation of the monochrome thumbnails on the [front page](/).
|
|
When I was building the site I wanted to include recent items
|
|
from my Flickr photostream. However with the predominantly monochrome
|
|
design I didn't like the look of all the colour they added. So I looked into
|
|
having monochrome versions of the thumbnails shown.
|
|
|
|
The first thing I investigated was Javascript image processing libraries. The
|
|
only main contender in that space was [Pixastic]. It worked but its cross browser
|
|
support wasn't great at the time. So I moved on to writing a tool that I
|
|
could run locally.
|
|
|
|
[Pixastic]: http://pixastic.com/
|
|
|
|
I decided the tool should generate a single image with
|
|
both the colour and monochrome versions in it (a technique known as spriting).
|
|
Using a single image means only one HTTP request instead of forty. Being a
|
|
programmer with an interest in Cocoa programming I created a small command line
|
|
tool that used the Flickr API to get the details of the last twenty images in
|
|
my photostream, fetch them and then use Core Image to convert them to
|
|
monochrome, add both the colour and monochrome versions to the output image and
|
|
finally save the result.
|
|
|
|
This worked great, however when I stopped hosting my site on my Mac I thought I
|
|
would need to run the process periodically on my Linux server, which ruled out
|
|
Core Image. I took this as another opportunity to learn something new and
|
|
rewrote it in Lua using imlib2 bindings. I had to make some additions to the
|
|
imlib bindings, which are [published on GitHub][luaimlib].
|
|
|
|
[luaimlib]: https://github.com/wezm/lua-imlib2
|
|
|
|
I used the Lua version for some time but never bothered to set it up
|
|
on the server. I wasn't uploading photos all that frequently and it
|
|
was simple enough to run locally and rsync the result. I've recently
|
|
switched back to the Mac version as it was simpler to get up and running
|
|
on my new laptop.
|
|
|
|
The [code is on GitHub][code] if anyone wants to do something similar. The
|
|
Cocoa version is on the master branch, the Lua version is on the
|
|
[lua branch].
|
|
|
|
[code]: https://github.com/wezm/monothumb
|
|
[lua-branch]: https://github.com/wezm/monothumb/lua
|
|
|
|
The current version of the processed thumbnails is shown below.
|
|
|
|
<div style="overflow-x: auto;">
|
|
<img src="/images/photos.jpg" />
|
|
</div>
|