HugoBlox-kit/modules/blox/layouts/_markup/render-image.html

{{/* Markdown Image Renderer for Hugo Blox Kit. */}}
{{/* Load image from page dir falling back to media library at `assets/media/` and then to remote URI. */}}

{{ $destination := .Destination }}
{{ $is_remote := strings.HasPrefix $destination "http" }}
{{ $caption := .Title | default "" }}
{{ $zoom := "true" }}
{{ $id := anchorize ($caption | plainify) }}
{{ $alt := .Text | default ($caption | plainify) }}
{{ $img_class := "" }}
{{ $fig_class := "" }}
{{ $max_width := "" }}
{{ $width := "" }}
{{ $height := "" }}
{{ $numbered := false }}

{{/* Workaround Hugo v0.81 error on Windows when `resources.Get (path.Join "media" <URL>)` */}}
{{- $img := "" -}}
{{- if not $is_remote -}}
  {{- $img = (.Page.Resources.ByType "image").GetMatch $destination -}}
  {{- if not $img -}}
    {{- $img = resources.Get (path.Join "media" $destination) -}}
  {{- end -}}
{{- end -}}

<figure {{ with $fig_class }}class="{{.}}"{{end}} {{ with $id }}id="figure-{{ . }}"{{ end }}>
  <div class="flex justify-center	">
    <div class="w-full" {{ with $max_width }}style="max-width: {{.}}"{{end}}>
      {{- if $img -}}
        {{- $isSVG := eq $img.MediaType.SubType "svg" -}}
        {{- $isGIF := eq $img.MediaType.SubType "gif" -}}
        {{- if $isSVG | or $isGIF -}}
          <img alt="{{ $alt }}"
           src="{{ $img.RelPermalink }}"
           loading="lazy"
           {{- if $zoom }} data-zoomable{{end}}
           {{- with $width }} width="{{.}}"{{end}}
           {{- with $height }} height="{{.}}"{{end}}
           {{- with $img_class }} class="{{.}}"{{end}} />
        {{- else }}
          {{/* Process responsive images - use 760px as default display size */}}
          {{- $img_md := $img.Fit "760x760 webp" -}}
          {{- $responsive := partial "functions/process_responsive_image.html" (dict "image" $img_md "mode" "responsive") -}}
          {{- $width := $width | default $img_md.Width -}}
          {{- $height := $height | default $img_md.Height -}}
          <img alt="{{ $alt }}" 
               srcset="{{ $responsive.srcset }}"
               sizes="(max-width: 480px) 100vw, (max-width: 768px) 90vw, (max-width: 1024px) 80vw, 760px"
               src="{{ $responsive.fallback.RelPermalink }}"
               width="{{ $width }}"
               height="{{ $height }}"
               loading="lazy"
               {{- if $zoom }} data-zoomable{{end}}
               {{- with $img_class }} class="{{.}}"{{end}} />
        {{- end }}
      {{- else -}}
        <img src="{{ $destination | safeURL }}" alt="{{ $alt }}" loading="lazy" {{ if $zoom }}data-zoomable{{end}}
             {{- with $width }} width="{{.}}"{{end}} {{- with $height }} height="{{.}}"{{end}}
             {{- with $img_class }} class="{{.}}"{{end}} />
      {{- end -}}
    </div>
  </div>

  {{- if $caption -}}
    {{/* Localize the figure numbering (if enabled). */}}
    {{- $figure := split (i18n "figure" | default "Figure %d:") "%d" -}}
    <figcaption{{ if eq $numbered "true" }} data-pre="{{- trim (index $figure 0) " " -}}&nbsp;" data-post="{{ index $figure 1 }}&nbsp;" class="numbered"{{ end }}>
      {{ $caption | markdownify | emojify }}
    </figcaption>
  {{- end -}}
</figure>