Hack together some random image display and create some "thank you" page with it

content/intern/thanks.md

@@ -0,0 +1,20 @@
+---
+title: Danke!
+slug: thanks
+description: Vielen Dank!
+draft: false
+showmetadates: false
+showmetalinks: false
+aliases:
+- /danke
+image:
+  alt: Thank you!
+  choices:
+  - /intern/thanks/awesome-dog.jpg
+  - /intern/thanks/could-you-get-any-cooler.jpg
+  - /intern/thanks/t_hanks.jpg
+---
+
+{{< random_image >}}
+
+Super gut!

layouts/shortcodes/random_image.html

@@ -0,0 +1,21 @@
+{{- $choices := $.Page.Param "image.choices" }}
+{{- if not $choices }}
+{{- errorf "missing value for 'image.choices': %s" .Position }}
+{{- end }}
+{{- $alt := default "random image" ($.Page.Param "image.alt") }}
+{{- $id := sha256 now.UnixNano }}
+<p id="{{ $id }}">
+  <img class="centered pad-vertical" >
+</p>
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+  const container = document.getElementById("{{ $id }}");
+  const choices = {{ $choices }};
+  if (!container || !choices) { return; }
+  const img = document.createElement("img");
+  img.alt = "{{ $alt }}";
+  img.classList.add("centered", "pad-vertical");
+  img.src = choices[Math.floor(Math.random() * choices.length)];
+  container.appendChild(img);
+})
+</script>