From 15b10c5186b28cb2e00a0d7a44acddfa45f0a70e Mon Sep 17 00:00:00 2001
From: Rik Berkelder <mail@riksolo.com>
Date: Tue, 11 Feb 2025 21:11:06 +0100
Subject: [PATCH] images with captions

---
 content/blogposts/2021-05-04-streamer-audio.md | 6 +++---
 content/includes/img.                          | 0
 eleventy.config.js                             | 8 ++++++++
 3 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 content/includes/img.

diff --git a/content/blogposts/2021-05-04-streamer-audio.md b/content/blogposts/2021-05-04-streamer-audio.md
index 1b487c7..801aca9 100644
--- a/content/blogposts/2021-05-04-streamer-audio.md
+++ b/content/blogposts/2021-05-04-streamer-audio.md
@@ -51,7 +51,7 @@ Sadly, OBS doesn't include an equalizer. But it does support something called VS
 
   After installing ReaPlugs and restarting OBS, go to the `Audio Mixer` section and click the gear icon for the Mic/Aux input. In the menu that pops up, select `Filters`. You'll now see the audio filters window for your microphone input in OBS. To add the ReaPlugs equalizer, click the `+` button in the bottom left, select `VST 2.x Plug-in`, and give it a name. Then click `{Please select a plugin}` and select `reaeq-standalone` in the dropdown menu and click the `Open Plug-in Interface` button. 
   
-![The ReaEQ UI](/img/blog/streamaudio/eq.png)
+{% figure "/img/blog/streamaudio/eq.png" "A screenshot of the ReqEQ UI" "The ReaEQ UI"%}
 
 You should now be presented with the ReaEQ plugin controls. If you speak into your mic you should see some things start to move in the visualizer section at the top. The moving squiggly line is a representation of the frequencies coming in and their volumes. The more to the right on the graph, the higher the frequency. 
 
@@ -88,13 +88,13 @@ One thing that's important to keep in mind with compression is that adding too m
 
 You can really see the differences between a compressed and an uncompressed signal if you look at the waveform for each. Notice how the signal in the compressed sound is a lot more consistent than the uncompressed signal.
 
-![The same audio signal, without and with compression](/img/blog/streamaudio/comp-wav.png)
+{%figure "/img/blog/streamaudio/comp-wav.png" "An image comparing the difference between a compresed and an uncompressed audio signal" "The same audio signal, without and with compression" %}
 
 #### Using compression in OBS
 
 Although OBS has a built-in compressor, we'll be using the one included with ReaPlugs as it's a bit nicer to use. To add the compressor plugin, add another VST 2.x Plug-in to your mic audio filters. Click `{Please select a plug-in}` and select `reacomp-standalone`, then click `Open Plug-in Interface`, you should now be presented with the ReaComp options screen.
 
-![The ReaComp UI](/img/blog/streamaudio/comp.png)
+{%figure "/img/blog/streamaudio/comp.png" "A screenshot of the ReaComp UI" "The ReaComp UI" %}
 
 To set your compressor up properly, you first need to talk into your microphone at your normal speaking level. When you start talking, you should see the big meter on the left of the plugin start to move. Set the slider between the big meters to a bit above where the signal is peaking. Then set the `ratio` setting to 5, the `attack` to 10ms and the `release` to 100ms. Then enable `Auto make-up` and `Limit output` and you should have a good starting point. At this point it's a good idea to record some test footage with talking both quietly and loudly, and listening to it to hear how it will sound on-stream.
 
diff --git a/content/includes/img. b/content/includes/img.
new file mode 100644
index 0000000..e69de29
diff --git a/eleventy.config.js b/eleventy.config.js
index c84a9c3..e2bffff 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -28,6 +28,14 @@ export default async function (eleventyConfig) {
 
 	//Images
 	eleventyConfig.addPlugin(eleventyImageTransformPlugin);
+	eleventyConfig.addShortcode("figure", (url, alt, caption) => {
+		return `
+		<figure>
+			<img src="${url}" alt="${alt}" />
+			<figcaption>${caption}</figcaption>
+		</figure>
+		`;
+	});
 
 	eleventyConfig.addPassthroughCopy("content/robots.txt");
 }