Another August Update

August 12, 2024

Tags: blog development

Yes, Another Update in August

I’ve actually been knee deep in the code for cyberbuffalo this past few weeks. We’ve had some time off and it’s been hot and i haven’t really wanted to be out in the workshop. I also got a bunch of film back from the lab and wanted to spruce some things up around here. I really wish I was maintaining more of a changelog for the site because it’s really went through a lot these past few weeks. I’ve already talked about the galleries getting updated and adding in some code markup. But I decided to add a completely new section this time and with that, fix up a bunch of stuff along the way.

Cameras & Relationships

I decided to add a new section to the site, Camers!! As I continue to update that galleries section, it’d be nice to add some notes or short reviews about the cameras that I use. But how to do it?

The Failed Path - Front Matter

I had the thought that I could create a template via shortcode. That template would be some kind of reiterative list of features and some pictures. I had the idea in my head. No big deal. In the front matter i’d make a list, something like this:

camera = 'camera name'
	feature 1 = 'description'
	feature 2 = 'description'
	...
	feature 8 = 'description'

and then you coud iterate through those with {{ range }}. Long story short, I was using the wrong variable.. This caused a lot of bugs on my page and inconsistent results. Before I decided to reach out to the wonderfully supportive hugo community, I thought that it was an issue with the front matter so I decided to switch to putting all of my camera info into a YAML file located in the data section of my hugo site. There was a blog that I followed which I have lost the link to about creating a YAML file of completed books and it was pretty helpful to get started. So now that I have this YAML file, I define the camera in the front matter

+++
title = "Olympus XA"
date = "2023-08-24T18:49:46.000Z"
draft = false
featured_image = "images/1.jpg"
summary = "the pocket rangefinder that could."
tags = ["camera"]
camera = "olympusxa"
+++

{{ $cameraval := .Page.Param "camera" }}

Pulls in the name of the camera and then we pass it on the YAML file:

{{ $order := slice "maker" "model" "format" "style" "lens" }}
	{{ $camera := index .Site.Data.cameralist.cameras $caminfo }}
		{{ range $order }}
			{{/* print all known fields in the desired order */}}
			{{ $k := . }}
			{{ $v := index $camera $k }}
				{{ if eq $k "maker" }}
					<li class="cameraList"><a href="/categories/{{ $v }}" class="listHead">{{ $k }}: {{ $v }}</a></li>
				{{ else if eq $k "format"}}
					<li class="cameraList"><a href="/categories/{{ $v }}" class="listHead">{{ $k }}: {{ $v }}</a></li>
				{{ else if eq $k "style" }}
					<li class="cameraList"><a href="/categories/{{ $v }}" class="listHead">{{ $k }}: {{ $v }}</a></li>
				{{ else }}
					<li class="cameraList">{{ $k }}: {{ $v }}</li>
				{{ end }}
		{{ end }}
		
	{{ range $k, $v := $camera }}
		{{ if not (in $order $k) }}
				{{/* print remaining fields not contained in the desired order;
				by that, additional fields unknown at the time of writing this
				shortcode are still printed at the end of the list */}}
				<li class="cameraList">{{ $k }}: {{ $v }}</li>
		{{ end }}
	{{ end }}

And it’s working out! I then added a bunch of formatting to this, but not too much. I also wanted to have a way to display some pictures of the cameras, but since a lot of this is taking place in a shortcode that splits the formatting into 2 column divs, I didn’t want to use a gallery shortcode from the main markdown file. I had toyed with coverting the gallery shortcode into a partial but I also thought that wouldn’t look right there. So I wrote a little CSS/HTML only carousel with the help of this tutorial. I added a little film strip background… as a treat, and tweaked the responsiveness settings so thigns stack up on mobile.

I also started to tweak the OpenGraph embed settings for the galleries. I need to rethink the way I’m storing featured images because it would make the embeds better and be less work on me to not have to make “cover.jpg” and “featured.jpg” and then add in my gallery images. I’m going to continue to toy around with that as well.

I think from this point out I’m going to keep a changelog, maybe even just locally, of all the changes I’ve made. It’ll at least help me remember everything I was doing, and isn’t that one of the halmark reasons to write something down in the first place?

One Last Thing!

OKAY! I have decided to also add a CYBERBUFFALO TIP! shortcode to the site as well. I can add text to the left side of the page and then the tip goes to the right. This was something that I had used in my cyberdeck manual and wanted to figure out the CSS to do it on my website as well.

CYBERBUFFALO SAYS:

You can enter whatever you want here, within reason!