Creating a gallery in 11ty (Eleventy)

| 2 min read

This site

When choosing a static site generator to make this site I wanted something simple but extremely flexible so that I could turn this site into a playground. Today my decision has proven finally useful!

This site is created using 11ty (Eleventy) a pretty simple static site generator. At first, I had some trouble wrapping my head around how it worked, but once you get it, modifying your site turns into a walk in the park.

The gallery

I have been willing to add a picture dump to this site for quite some time. Guess what? I did it! And it only took me around 30min.

My plan was letting 11ty read all pictures from a folder and create a page with them. This is how I did it:

1. Creating a gallery collection

Collections are the way 11ty handles passing data for pages (or at least that is my understanding), so first I had to create a collection with all my image URLs to pass it on to a page:

// file: .eleventy.js
const fs = require("fs");
const path = require("path");

exports.addGalleryCollection = (eleventyConfig) => {
eleventyConfig.addCollection("gallery", () => {
const galleryPath = path.resolve(__dirname, "../src/images/gallery");
const files = fs.readdirSync(galleryPath);

return files.map((file) => {
console.log(`🖼 Adding picture to gallery: ${file}`)
return {
name: file.split(".")[0], // Get image name without extension
src: `/images/gallery/${file}`,
}; // Array<{name: "Image name", src: "/image.jpg"}>
});
});
};
});

(wow beautiful! didn't know I had syntax coloring configured 🤔)

2. Dumping the images

Now we just have to fill the gallery with stuff. Went to /src/images/gallery and dumped all images I want to see there. Now, when building our site we should see a bunch of logs like this: "🖼 Adding picture to gallery..."

3. Creating a new gallery page

With our data ready to consume, we need to write the page to render the gallery, a Nunjucks template did the trick, which I believe comes pre-configured with 11ty.

// file: gallery.njk

---
layout: base.njk
permalink: /gallery/
title: 'Gallery'
---
<ul id="gallery">
{% for image in collections.gallery %}
<a class="item" href="{{ image.src }}" target="__blank">
<img src="{{ image.src }}" width="{{ image.width }}" height="{{ image.height }}" title="{{ image.name}}" alt="{{ image.name}}" />
</a>
{% endfor %}
</ul>

In my case, just placing this template inside my /src folder makes it work. Not sure if this is a default 11ty config or was preconfigured in my base template.

4. Styling our new gallery

With half my professional life working as a designer it was pretty easy to know what had to be done to style this... So I went and stole this CSS masonry grid from here. (Thanks!)

// gallery.scss
#gallery {
column-count: 3;
column-gap: 1em;
padding-top: 16px;

.item {
display: block;
background-color: #eee;
margin: 0 0 1em;
width: 100%;
img{
margin: 0;
}
}

@media only screen and (max-width: 767px) and (min-width: 540px) {
column-count: 2;
}

@media only screen and (max-width: 600px) {
column-count: 1;
}
}

5. Enjoy!

You can see the result at my new flamboyant picture dump

Vilva.