Creating a photo album using 11ty

This blog is created using the wonderful static site generator 11ty. I wanted to add a single page which would show a gallery of all the photos posted in all of the posts on the site.

The below few snippets show how I managed to accomplish that with a few lines of Javascript.

Firstly, we need to add a custom collection which would list every post that has the tag "photography":

eleventyConfig.addCollection("gallery", (collection) => {
return collection
.sort((p1, p2) => -;

Then, on photos.njk we will iterate over the collection and using a custom filter (shown underneath), we will output each individual image:

{% for post in | reverse %}
{% for image in post.content | markdownToImagesOnly %}
{{ image | safe }}
{% endfor %}
{% endfor %}

And finally, the actual meat of the solution which is a custom filter that renders the Markdown to HTML and then extracts all the <img> tags:

    eleventyConfig.addFilter("markdownToImagesOnly", str => {
const markdownLibrary = markdownIt({html: true});
const inline = markdownLibrary.renderInline(str).replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
return inline.match(/<img\s+[^>]*?>/g);

And with that, the solution is complete. You can see the results on