hugo shortcode to have a gallery

gallery.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css" integrity="sha256-tBxlolRHP9uMsEFKVk+hk//ekOlXOixLKvye5W2WR5c=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.min.js" integrity="sha256-CtKylYan+AJuoH8jrMht1+1PMhMqrKnB8K5g012WN5I=" crossorigin="anonymous"></script>

<!--
    The galleries must be all lowercase otherwise the caption are not found.
    We use a flexport to show 3 photos in a row, and that should work in mobile as well.
    Thumbs are generated on the fly.

    Each gallery is placed under a content/galleries as:

        content/galleries/album1
            /index.md - normal index stuff, with the 'gallery 'short code in it.
            img/      - symlink to all photos (and captions)

    In the photo directory a .txt file with the same basename as the photo is used as
    a caption. This is in markdown format.

    Clicking used the lightbox JS to show a slideshow like thing - I may selfhost the javascript
    at some point.
-->

{{ $image := (.Page.Resources.ByType "image") }}
{{ $i := 0 }}
{{ with $image }}
    {{ range . }}

    {{ if eq (mod $i 3) 0 }}
        <div class="flex-container">
    {{ end }}

    {{ $resized := .Fill "300x230 q20" }}

    {{ $caption := "" }}
    {{ $captionfile :=  printf "%s.%s" ( strings.TrimSuffix (path.Ext .RelPermalink) .RelPermalink ) "txt" }}
    {{ if os.FileExists $captionfile }}
        {{ $caption = os.ReadFile $captionfile | markdownify }}
    {{ end }}

    <div style="width:{{ $resized.Width }}px">
        <figure>
            <a href="{{ .Permalink }}" data-lightbox="x" data-title="{{ $caption }}">
            <img src="{{ $resized.Permalink }}" />
        </a>
        {{ if $caption }}
          <figcaption>
            <p>
            {{ $caption }}
            </p>
          </figcaption>
        {{- end }}
        </figure>
    </div>

    {{ if eq (mod $i 3) 2 }}
        </div>
    {{ end }}

    {{ $i = add $i 1 }}

    {{ end }}
{{ end }}