This was a tough nut to crack. I’m totally new to Go Html Templates and Go itself, and I’ve never really used anything outside of Jekyll. It took me a minute, but I wound up coming up with this:

{{ $image := (resources.Get .Destination) }}
{{ with $image }}
    {{ if eq $image.MediaType.SubType "svg" }}
        <a data-fancybox="image" href="{{ $image.RelPermalink }}" data-caption="{{ with $.Title }}{{ . }}{{ end }}">
            <img src="{{ $image.RelPermalink }}" {{ with $.Text }} alt="{{ . }}" {{ end }} {{ with $.Title}} title="{{ . }}"{{ end }} />
        </a>
    {{ else }}
        {{ $resize := .Fill "200x165 webp q80" }}
        <a data-fancybox="image" href="{{ $image.RelPermalink }}" data-caption="{{ with $.Title }}{{ . }}{{ end }}">
            <img src="{{ $resize.RelPermalink }}" {{ with $.Text }} alt="{{ . }}" {{ end }} {{ with $.Title}} title="{{ . }}"{{ end }} />
        </a>
    {{ end }}
{{ end }}

Apparently I have a *.svg file on my blog somewhere, because that was a thing I had to catch right away for this to work. So I had to move all my images out of static and into assets for it to work, first of all. Then I had to figure out how to query a parent context, so I could fill in Text and Title with the images. That’s what the $ is in $.Text. It’s the parent context outside of $image.

So this generates a 200x165px webp thumbnail for every image and displays that, then allows fancybox to handle full size images along with gallery features and such. It’s really cool. This is better than the theme I’m using’s handling with javascript just enclosing images with a scaled version of the full image. Blech. I hate that half-ass handling. I prefer mine. It’s more robust and makes it so the blogger using this thing can be lazier.

I’m probably still going to tweak the settings though. But yeah, this was cool to get done, but man it was hard as fuck to get from Point A -> Point B.