redstrate.com/themes/red/layouts/_default/art.html

{{ define "main" }}
    <h2>{{ .Title }}</h2>

    <p>Welcome to my art gallery! This is the most complete view of my work, which I have archived since 2016.</p>

    <p>This current iteration of the gallery is a work-in-progress, so details and alt-text may be missing for older work.</p>

    <p>If you wish to follow me when I post new art, you can follow me on <a href="https://mastodon.art/@redstrate">Mastodon</a>, <a href="https://www.pixiv.net/en/users/58118005" >Pixiv</a>, <a href="https://redstrate.newgrounds.com/">Newgrounds</a> or my <a href="/art/index.xml">Art RSS Feed!</a></p>

    {{ $paginator := .Paginate (where .Pages "Type" "art") 50 }}

    {{ if eq $paginator.PageNumber 1}}
    <h3>Featured Artwork</h3>
    <div class="gallery-con">
        {{ range $.Param "featured" }}
        <figure class="gallery-fig">
            {{ $full := resources.Get (printf "art/%s" .filename) }}
            {{ if $full }}

            {{ $filename_without_ext := strings.TrimSuffix (path.Ext .filename) .filename }}

            {{ $month := 1 }}

            {{ if .date }}
                {{ $split := split .date "-" }}
                {{ $month = index $split 0 }}
            {{ end }}

            {{ $path := printf "/art/%d/%.2d/%s" (int .year) (int $month) $filename_without_ext}}

            <a href="{{ $path }}" aria-label="Click to view details">
                {{ $title := .title }}
                {{ with resources.Get (printf "art-thumbs/%s" .filename) }}
                <img class="gallery-img" alt="{{ $title }}" width="128" height="128" src="{{ .Permalink }}"/>
                {{ else }}
                <p>Thumbnail not found!</p>
                {{ end }}
            </a>

            <figcaption>
                {{ with .title }}
                "{{ . }}"
                {{ end }}
            </figcaption>

            {{ else }}

            <em>CANNOT FIND {{ .filename }}</em>

            {{ end }}
        </figure>
        {{ end }}
    </div>

    <h3>Years</h3>
    <div class="generic-con year-con">
    {{ range $.Param "years" }}
        {{ $year := . }}
        <a href="/art/{{ . }}">
            {{ $thumbp := printf "/year-thumbs/%s.webp" . }}
            {{ with resources.Get $thumbp }}
            <img width="512" height="256" alt="{{ $year }}" class="gallery-img article-img" src="{{ .RelPermalink }}">
            {{ end }}
        </a>
    {{ end }}
    </div>
    {{ end }}

    <div class="grid">
    {{ range $paginator.Pages }}
            {{ $full := resources.Get (printf "art/%s.webp" .Params.slug) }}
            {{ if $full }}

            {{ $filename_without_ext := .Params.slug }}

            {{ $month := 1 }}
            {{ $year := 1 }}

            {{ if .Params.date }}
                {{ $split := split .Params.date "-" }}
                {{ $month = index $split 0 }}
                {{ $year = index $split 3 }}
            {{ end }}

            <a href="{{ .Permalink }}">
            {{ $path := printf "/art/%d/%.2d/%s" (int $year) (int $month) $filename_without_ext}}
                    {{ $title := .Params.title }}
                    {{ $image := (resources.Get (printf "art/%s.webp" .Params.slug)).Resize "600x" }}
                    {{ with $image }}
                    <img class="grid-item" width="{{ .Width }}" height="{{ .Height }}" alt="{{ $title }}" src="{{ .Permalink }}"/>
                    {{ else }}
                    <p>Thumbnail not found!</p>
                    {{ end }}
            {{ else }}
            </a>

            <em>CANNOT FIND {{.Params.slug }}</em>

            {{ end }}
    {{ end }}
    </div>

    {{ with $paginator.Prev }}
    <a href="{{ .URL }}">Prev</a>
    {{ end }}

    {{ with $paginator.Next }}
    <a href="{{ .URL }}">Next</a>
    {{ end }}

    <script>
    imagesLoaded(document.querySelector('.grid'), function(instance) {
        new Masonry('.grid', {
            itemSelector: '.grid-item',
            columnWidth: 300,
            fitWidth: true,
            gutter: 10
        });
    });
    </script>

{{ end }}