Dynamic looping in Liquid to build an advent calendar
Like 24 Ways, we have an advent calendar on the Suffolk Libraries site, consisting of a staff Christmas present suggestion a day. Each new entry appears at 1am.
While it might not seem that spectacular, I like this code and how everything slots together to create a dynamic effect on a static website. Here’s the code that generates the calendar:
And here’s how it works:
- The advent calendar entries are normal posts tagged
advent_postsobject consists of all published posts tagged
advent-calendar, which we loop through using a standard
forloop. Naturally enough, there are a maximum of 24 posts in the object (although you won’t really need this code unless you put more than 24 entries in the calendar, which would be plain wrong).
- We automate post publication on a day by day basis by triggering a site build using a Zapier zap. Each advent calendar post has a
dateset in its YAML meta data, so they’ll only be published when their day comes round.
reversefilter orders the posts in the set by date starting with the oldest first, rather than the newest first. This ensures the advent calendar displays entries in order, i.e. Dec 1 then Dec 2 then Dec 3 etc.
- You’ll see each entry has its own Christmas icon (an SVG background image). We get a different image a day by applying a different class:
custom-icon-xmas-2etc. To get a different number we use
forloop.index, which returns the current loop iteration. So when we’re iterating through the loop the first pass returns
1, the second
2and so on.
This is one of the best things about Jekyll and Liquid. The syntax is easy to learn and well-documented, which means that, with a bit of thought (and Zapier), you can create some dynamic events on a static website.
100 mph Previous note
Next note Jaki Liebezeit