Making a free image gallery with 11ty and Neocities.org

Last month I wrote a version of this tutorial aimed at people who prefer a simpler, more straightforward setup for their websites without the need to install extra tools or use a command line. As with everything, there are trade-offs to be considered. In this follow-up, I will revisit the gallery project using 11ty, a popular [static site generator](…

Going forward, I will assume basic familiarity with command line interfaces, or at least willingness to learn how to use them. (If that is you, I promise it will be a lot easier that it sounds!)

Here’s a look at the finished result on radical-gallery.neocities.org.

Radical indeed!

Much like in the previous tutorial, we will use Neocities to host our site, so you can go ahead and sign up for an account now. To be able to upload the finished gallery automatically, we’ll need to sign up for the $5/month Supporter plan. The free tier will still be sufficient for hosting the site, we’ll just have to upload the site manually.

If all that sounds good, let’s begin!

First, we’ll need to install node.js. If you’re not familiar with it yet, think of it as a way to run JavaScript code on a server, or inside your command line. This is what will let us use 11ty to turn a bunch of files into a website.

Download (or clone) the GitHub repository for this project. We will be working inside the 11ty/base-project folder. Navigate to it using the cd command in the command line. As a quick tip, you can type cd and then drag the folder which you want to open into the command line window to make this step easy.

Let’s install the project’s dependencies using npm install.

If you opted in to become a supporter (kudos to you, you’re helping keep the service free for many of its users!), you can find your API key on the Settings page, link to which is available when you hover, hover over your site’s name in the top-right corner, then switch to the API tab. (Or if you prefer a link: neocities.org/settings/YOURSITENAME#api_key.)

You can save the API key in the .env file. If you’re sticking with the free plan, you can skip this step.

Now for the fun part.

Put the images for your gallery in the images/gallery folder. Next, inside the _data folder, you will find two files:

site.json: here you can set up basic information about your site, and
images.json: this is where we will build our gallery.

Both of these files are written in a JSON data format. Let’s take a closer look at images.json. Here is a gallery with just one item.

[
{
"src": "images/gallery/all-power-to-the-people.jpg",
"width": 499,
"height": 613,
"title": "All power to the people",
"alt": "A stark black drawing of a raised clenched fist on a white background. The text 'All power to the people' surrounds the fist above and below it.",
"caption": "<strong>All power to the people (1960s)</strong><br />By Emory Douglas, Black Panther Party's Minister of Culture."
}
]

Here we’re describing some basic attributes of our first image, like its source (src) and its dimensions (width and height). Then we have a few description fields, here’s how they are used in the gallery.

The alt text is not shown in the screenshot above as this value is not typically visible, rather it’s the text that’s read out by screen readers or shown if the image fails to load for some reason.

We can then add as many of these images, separated by a comma.

[
{
"src": "images/gallery/all-power-to-the-people.jpg",
"width": 499,
"height": 613,
"title": "All power to the people",
"alt": "A stark black drawing of a raised clenched fist on a white background. The text 'All power to the people' surrounds the fist above and below it.",
"caption": "<strong>All power to the people (1960s)</strong><br />By Emory Douglas, Black Panther Party's Minister of Culture."
}
{
"src": "images/gallery/image-2.png",
"width": 800,
"height": 1000,
"title": "Second image title",
"alt": "Another short description of what's in the image for users of screen readers.",
"caption": "More details about the second image, like source, or copyright information."
}
]

And this is the trade-off I was referring to earlier. We can either write the HTML code for the gallery ourselves, as we’ve done in the original tutorial, and which can be a bit more tedious, or we can work with JSON files, which might be easier to read and maintain, but this requires a tool that generates the HTML for us.

Neither approach is better, we’re just making a decision about which workflow works best for our needs.

Once we’re done editing the JSON files, we can go back to the terminal and run a command that will tell 11ty to transform this JSON file into an HTML file with the code for our gallery, and let us access the gallery locally on our computer.

npm start

Once the process finishes, you can open http://localhost:8080/ in your browser and marvel at the fruits of our labor. Well done!

Now, depending on whether you decided to splurge on the paid plan or not, you have two options how to publish your website.

If you are on the paid plan and saved your API key, you can upload your files with:

npm upload

Otherwise you can run the below command to generate the site into the _site folder, and you can then upload the files yourself.

npm build

If you’d like to further customize your gallery page, some of the other files and folders to look at are:

_includes\layout.njk: this is the main layout file, it mainly contains various metatags.
index.njk: this file contains the base HTML of the page and will be merged with the generated HTML code of the gallery
the src folder contains the JavaScript and CSS files

The libs is meant for adding libraries, which is currently only Photoswipe, which is used to present the gallery itself.

Hope you enjoyed this walkthrough, and that you like your new gallery! If you run into any issues, or just want to share what you made, feel free to reach out. Otherwise, until next time!

#11ty #eleventy #image-gallery #neocities #tutorial

Similar Posts