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.