Homepage/layouts/shortcodes/random_image.html

22 lines
769 B
HTML

{{- $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 (index (seq 999 | shuffle) 0) }}
<p id="{{ $id }}">
<img class="centered pad-vertical" >
</p>
<script>
document.addEventListener("DOMContentLoaded", function() {
const container = document.getElementById("{{ $id }}");
const choices = JSON.parse(`{{ $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>