Wallpaper image courtesy of Devine Lu Linvega in celebration of their successful pacific crossing.

Optimisations200729 | Responsive images with eleventy.

Anchors Updates

I managed to tackle most of the items on my todo list from two weeks ago.

Responsive Images

Getting responsive images to work with eleventy probably was the most challenging task, but it finally works the way I need it and without using external plugins, except my own batch resize script. Which, in truth, depends on imagemagick, so not quite no dependencies.

The batchResize.sh script resizes all images in the img/ directory and puts them into a temp directory. It only processes new files, so if a file changed, it needs to be manually deleted. Alternatively the whole folder can be deleted and the script re-run, but naturally it takes a while until it chewed through all images.

The deploy script removes the dst directory and then rebuilds all pages to prevent orphaned files being uploaded. After building the script copies all the image variants to the dst folder and starts the upload to the webserver.

Currently responsive images only work for pages using the project.njk template. It takes an array of images as an input and builds all img HTML elements using srcset and widths and sizes defined in the template and content file.

There is a noVariant flag to skip single images, e.g. when the source image is smaller than 680 pixels.

Source Code: batchResize.sh


The sitemap uses a macro script now to properly display all page names in their correct order.

Template Code: sitemap.njk

Other updates


There are a few more things I'd like to do before I start concentrating on adding and polishing content:

Two larger projects for Anchors are to get Logbook and Chronicle working with it.


Links I found interesting this week: