Artwork gallery for commissions
I've created an artwork gallery for all my commissions, as well as spiffed up the styling a bit. Feel free to take a look - and see below for a behind the scenes look on how it's done.
Behind the scenes
As you might know by now, this site uses Jekyll. All artwork is stored in a "collection" defined in _config.yml
, set to output the individual documents:
collections:
artists:
artwork:
output: true
There is also an "artists" collection used to store artist information.
To use "Nature's Child" by Alby as an example:
There is an _artwork/alby-natures-child.md
file that contains the metadata:
---
title: "Nature's Child"
author: "Alby"
date: "2024-08-19"
desc: "A young Dusty out in nature, wearing red overalls, peeking over a fence."
categories:
- safe
---
and then the actual image is stored as _artwork/alby-natures-child.png
.
There is also an _artists/alby.md
file that contains the metadata for Alby themselves:
---
title: "Alby"
site: "https://albys.space/"
---
Next, in _config.yml
, there is a default layout set for all documents under the artwork collection:
defaults:
-
scope:
path: "_artwork"
values:
layout: artwork
This means that Jekyll will use _layouts/artwork.html
to generate the actual document. I'll skip the majority of the document, but there are a couple of snippets that perform some magic:
First, this snippet finds the artist from the artists collection, and makes sure to link their site.
{%- assign artist = site.artists | find: "title", page.author -%}
<h2 class="artwork-artist" itemprop="author copyrightHolder" itemscope itemtype="http://schema.org/Person"><a href="{{ artist.site }}" itemprop="name">{{ artist.title }}</a></h2>
Second, this snippet digs out the corresponding file and sticks it in an img tag.
{%- assign artwork_collection = site.collections | find: "label", "artwork" -%}
{%- assign artwork_file = artwork_collection.files | find: "basename", page.slug -%}
<img src="{% link {{artwork_file.path}} %}" alt="{{page.desc}}">
The artwork indices are made in the same way, roughly.
That's about it for how things are set up right now.