Skip to content

Instantly share code, notes, and snippets.

@pdxmph
Created May 16, 2022 19:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pdxmph/6133e232e1edc978307c57c2fb897e60 to your computer and use it in GitHub Desktop.
Save pdxmph/6133e232e1edc978307c57c2fb897e60 to your computer and use it in GitHub Desktop.
cursed micro.blog post

I really appreciate the cheesy-gallery plugin and have it in unlinked production until I make one more gallery to ensure that some patches I applied to my fork work from beginning to end.

I woke up at 4 this morning, couldn't manage to get back to sleep, so there was nothing to do but make some tea and do something relaxing. I went to bed feeling a little unhappy about my galleries not having alt values for screen readers, so I took the opportunity to learn about Jekyll site data to create a YAML hash of images in a gallery so I could include useful metadata at render.

In _data/galleries/spring-break-2022.yml

	DSCF3369-4.jpg:
	  description: "The Backpacker 1 at Cape Blanco"
	  date_taken: 2022-03-22
	  location: "Cape Blanco State Park, Oregon"

	DSCF3643.jpg:
	  description: "Al at Harris Beach State Park"
	  date_taken: 2022-03-24
	  location: "Harris Beach State Park, Oregon"


	DSCF3504.jpg:
	  description: "Al and camera at Cape Blanco"
	  date_taken: 2022-03-22
	  location: "Cape Blanco State Park, Oregon"

In the frontmatter:

gallery: spring-break-2022

In the template:

	{% assign gallery = site.data.galleries[page.gallery] %}

(Note: I am missing a step. I am guessing I could get the gallery name without needing to put it in frontmatter, but this is what you get at 4 a.m.)

and

	{%- for image in page.images -%}
			{% assign image_data = gallery[image.name] %}
			<div class="4u" style="float:left;">
				<div class="rect-img-container">
					<a href="{{image.name}}" data-lightbox="gallery" data-title="{{image_data.description}}"><img src="{{image.name}}_thumb.jpg" alt="{{image_data.description}}" class="rect-img" /></a>  
				</div>
			</div>
	{%- endfor -%}

(For the record, David proposes a much more semantically correct way to structure the image markup. This is my v1, which amounted to using his gallery engine to drive my pre-existing templates.)

It's a little tedious editing YAML, but I've started a script to at least populate a gallery.yml file with the hashes for each image, and it's not nearly as tedious as most web-based CMSes when it comes to asset management. And I could clean up the entire pipeline by being better about writing descriptions in Lightroom, then adding EXIF extraction to automating the data file creation.

Anyhow, the Lightbox plugin does you the favor of using your descriptions as captions if you put in the time to have descriptions, so the images display with that caption if there's a key in the hash for the image, like this:

Gallery image with data-driven caption in the Lightbox display

So, an okay use of insomnia hours. I've just had my third cup of tea. Probably time to, er, align with the business.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment