Optimisations200729 | Responsive images with eleventy.
I managed to tackle most of the items on my todo list from two weeks ago.
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.
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.
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
It takes an array of images as an input and builds all
img HTML elements using
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
- Added regex cheatsheet
Because I never can remember even the basics.
- Added my time tracking log file to the repository
Because I recently lost four months worth of tracking.
- Forked eleventy-navigation plugin
Because of minor changes that are useful to me.
- Added a Favicon. Because they're cool!
- Added RSS link in page header
This should hopefully fix errors when trying to add the page in a RSS reader.
- Optional cover images
Cover images are now optional on page listings. Captions can be added to covers.
There are a few more things I'd like to do before I start concentrating on adding and polishing content:
- Responsive images for covers
- Responsive images shortcode for markdown
- Make off site images local (Relogen, Logbook, Chronicle, Zyklus)
Two larger projects for Anchors are to get Logbook and Chronicle working with it.
Links I found interesting this week:
A beautiful pre-customised Linux distribution based on Arch. Needs to mature, but looks promising.
A worker cooperative for independent creators.
A tiling Wayland compositor and drop-in replacement for i3 window manager.
- Analogue Pocket
A multi-video-game-system portable handheld.
- VORTECX CORE 40%
A beautiful 47-key mechanical keyboard.
- The carbon footprint sham
An essay on the term, coined by BP marketing firms to load responsibility off on to individuals.