gallery.html

{{- /*
    Stylesheet: assets/sass/components/_gallery.scss
    JS: assets/js/gallery-filter.js
    
    See README.md#image-gallery
    
    Based on https://codeproject.com/Articles/5276331/Creating-an-Image-Gallery-with-Hugo-and-Lightbox2
*/ -}}

{{- .Page.Store.Set "galleryUsed" true -}}
{{- $dateFormat := .Site.Params.dateFormat -}}

{{- /* Argument: Image Source (a subpath of assets/images) (Optional) */ -}}
{{- $path := default "" (print "/images/" (.Get 0)) -}}

{{- /* Argument: Class (Optional) */ -}}
{{- $class := default "" (.Get 1) -}}

{{- /* Argument: Sort By (Optional) */ -}}
{{- $sortBy := default "date" (.Get 2) -}}

{{- /* Handle sizing */ -}}
{{- $size := "m" -}}
{{- $thumbSize1x := 150 -}}
{{- if strings.Contains $class "size-s" -}}
    {{- $size = "s" -}}
    {{- $thumbSize1x = 59 -}}
{{- end -}}
{{- $thumbSize2x := (mul $thumbSize1x 2) -}}

{{- /* Load images */ -}}
{{- if not (strings.ContainsAny $path "*.") -}}
    {{- $path = (print $path "/*.{jpg,JPG,jpeg,JPEG,png,PNG,gif,GIF,webp,webP,WEBP}") -}}
{{- end -}}
{{- $images := resources.Match $path -}}

{{- if $images -}}
    {{- /* Gallery Filter */ -}}
    {{- $filterEnabled := and (ne $size "s") (gt (len $images) 8) -}}
    
    {{- if $filterEnabled -}}
        {{- .Page.Store.Set "galleryFilterUsed" true -}}
        <div class="gallery-filter">
            <form action="#" class="gallery-filter-form">
                <label for="gallery-search" class="state-hidden">
                    {{- T "search-images" -}}
                </label>
                <input type="search"
                       id="gallery-search"
                       name="q"
                       placeholder="{{ T "search" }}"
                       class="gallery-filter-input"
                       autocomplete="on"
                       autocapitalize="off"
                       autofocus
                       title="{{ printf "– %s\n– %s" (T "press-esc") (T "press-stroke") }}" 
                       aria-label="{{ T "search-images" }}">
        
                <input type="submit"
                       value="{{ T "search" }}"
                       class="state-hidden">
            </form>
        </div>
        
        {{- /* No Results Message */ -}}
        <p id="gallery-no-results" aria-hidden="true" class="state-hidden">
            {{- T "no-images-found" -}}
        </p>
    {{- end -}}

    {{- /* Gallery */ -}}
    <div class="gallery{{ with $class }} {{ . }}{{ end }}"
         id="gallery-{{ .Ordinal }}"
         role="listbox"
         aria-label="{{ T "image-gallery" }}">
        {{- $imagesSlice := slice -}}
        {{- range $image := $images -}}
            {{- $filePath := printf "assets/%s" $image.Name }}
            {{- $fileInfo := os.Stat $filePath }}
            {{- $imagesSlice = $imagesSlice | append (dict "modTime" $fileInfo.ModTime "image" $image) }}
        {{- end -}}

        {{- /* Sort images, default: by date */ -}}
        {{- $sorted := cond (eq $sortBy "name") $imagesSlice (sort $imagesSlice "modTime" "desc") -}}

        {{- /* Loop all images */ -}}
        {{- range $index, $item := $sorted -}}
            {{- $image := $item.image -}}
            {{- $imageName := ($image.Name | replaceRE "^.*/(.*)\\..*" "$1") | safeHTMLAttr -}}
            {{- $imageURL := $image.RelPermalink | safeURL -}}
            {{- $imageDate := $item.modTime.Format $dateFormat | safeHTML -}}
            {{- $imageDateText := printf "\n\n%s %s" (T "last-mod-short") $imageDate -}}
            {{- $imageID := $imageName |
                            replaceRE "['’~#_+./@]" "" |
                            urlize |
                            replaceRE "-{2,}" "-" -}}

            <a href="{{- $imageURL }}"
               class="gallery-image"
               data-pswp-width="{{ $image.Width }}"
               data-pswp-height="{{ $image.Height }}"
               data-cropped="true"
               id="{{ $imageID }}"
               target="_blank"
               title="{{ $imageName }}{{ $imageDateText }}"
               role="option"
               aria-selected="false">

                <img class="gallery-thumb"
                     alt="{{- $imageName -}}."
                     loading="{{- cond (gt $index 12) "lazy" "eager" -}}"

                     {{- if eq $image.MediaType.SubType "gif" -}}
                        src="{{- $imageURL -}}"
                     {{- else -}}
                         {{- /* Create resized thumbs and add them into a "t/" subdirectory */ -}}
                         {{- $finalThumb1x := $image.Resize (printf "%dx webp q60" $thumbSize1x) -}}
                         {{- $finalThumb2x := $image.Resize (printf "%dx webp q50" $thumbSize2x) -}}
                         {{- if lt $finalThumb1x.Height $thumbSize1x -}}
                             {{- $finalThumb1x = $image.Resize (printf "x%d webp q60" $thumbSize1x) -}}
                             {{- $finalThumb2x = $image.Resize (printf "x%d webp q50" $thumbSize2x) -}}
                         {{- end -}}

                        {{- $hash := substr (md5 $image.RelPermalink) 0 8 -}}
                        {{- $thumbDir := path.Dir $image.RelPermalink -}}
                            
                         {{- $thumb1x := $finalThumb1x | resources.Copy (print $thumbDir "/t/" $hash ".webp") -}}
                         {{- $thumb2x := $finalThumb2x | resources.Copy (print $thumbDir "/t/" $hash "@2x.webp") -}}

                         src="{{- $thumb1x.RelPermalink | safeURL -}}"
                         srcset="{{- $thumb1x.RelPermalink | safeURL }} 1x,
                                 {{- $thumb2x.RelPermalink | safeURL }} 2x"
                     {{- end -}}>
                
                {{- /* Image Caption */ -}}
                {{- if $filterEnabled -}}
                    <br><span>{{- $imageName | replaceRE " - " "&nbsp;&#8209; " | safeHTML -}}</span>
                {{- end -}}
            </a>
        {{- end -}}
    </div>
{{- else -}}    
    {{- errorf "The %q shortcode didn't match any images for path:\n%q\n\nSee %s" .Name $path .Position -}}
{{- end -}}