Omphaloskepsis-2/layouts/shortcodes/figure.html

{{- if ( and ( .Get "src" ) ( .Get "chart-id" ) ) -}}
  {{- errorf "Both chart ID and resource source defined" -}}
{{- end -}}

{{ $src := $.Page.Resources.GetMatch (.Get "src") }}
{{ if ( and ( not $src ) ( not ( .Get "chart-id" ) ) ) }}
  {{- errorf "No Page Resource found for src '%v' for post '%v'" ( .Get "src" ) $.File.Path -}}
{{ end }}
{{ $linkedResource := $.Page.Resources.GetMatch (.Get "link") }}

<figure class="article__figure figure{{ with .Get "class" }} {{ . }}{{ end }}">
  {{- with .Get "chart-id" -}}
    <canvas class="figure__chart" id="{{ . }}">
      You must enable Javascript to view this chart.
    </canvas>
  {{- else -}}
      {{- if .Get "link" -}}
          {{- if $linkedResource }}
            <a href="{{ $linkedResource.RelPermalink }}"{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
          {{ else }}
            <a href="{{ .Get "link" }}">
          {{ end }}
      {{- end -}}
      
      {{- if eq $src.ResourceType "image" -}}
        <picture class="figure__picture"
                 itemprop="image">
          <img class="u-photo figure__image"
            {{ if ( or ( eq $src.MediaType.SubType "svg" ) ( eq $src.MediaType.SubType "gif" ) ) }}
              src="{{ $src.RelPermalink }}"
            {{ else }}
              {{ with $src.Resize "1200x webp" }}
                src="{{ .RelPermalink }}"
              {{ end }}
              width="{{ $src.Width }}"
              height="{{ $src.Height }}"
            {{ end }}
            {{- with $src.Params.alt }}
              alt="{{ . }}"
            {{- end -}}
            {{- with $src.Params.title }} title="{{ . }}" {{ end -}}
            loading="lazy"
            role="img"
          />
        </picture>
      {{- else if eq $src.ResourceType "video" -}}
        {{- if eq $src.MediaType "video/ogg" -}}
          <audio class="u-audio figure__audio" itemprop="audio" controls>
            <source src="{{ $src.RelPermalink }}" type="{{ $src.MediaType }}" />
            <p>Your browser doesn't support embedded audio, <a href="{{ $src.RelPermalink }}">view the audio here</a>.</p>
          </audio>
        {{- else -}}
          <video class="u-video figure__video" 
                 controls
                 src="{{ $src.RelPermalink }}"
                 poster="
                 {{- if $src.Params.poster -}}
                   {{- $posterSrc := $.Page.Resources.GetMatch ( .Get $src.Params.poster ) -}}
                   {{- with $posterSrc.Resize "1200x webp" -}}
                     {{- .RelPermalink -}}
                   {{- end -}}
                 {{- else -}}
                   {{- warnf "No poster defined for resource %q" $src.RelPermalink -}}
                 {{- end -}}
                 "
                 itemprop="video"
          >
           Your browser doesn't support embedded video, <a href="{{ $src.RelPermalink }}">view the video here</a>.
          </video>
        {{- end -}}
      {{- else if ( or ( ne $src.ResourceType "image" ) ( ne $src.ResourceType "video" ) ) -}}
          {{- errorf "No handling for resource of type %q" $src.ResourceType -}}
      {{- end -}}
      {{- if .Get "link" }}</a>{{ end -}}
    {{- end -}}

    {{- if or ( .Get "caption" ) ( .Get "title" ) ( $src.Params.attr ) -}}
        <figcaption class="figure__caption{{ if not ( or ( .Get "caption" ) ( .Get "title" ) ) }} figure__caption--no-height{{ end }}">
            {{- with $src -}}
                {{ if .Params.attrlink -}}
                  <a class="figcaption__attrlink" href="{{ .Params.attrlink }}">
                {{- end -}}
                {{- if .Params.attr -}}<p class="figcaption__attr">{{ .Params.attr | safeHTML }}{{ with .Params.attrlicence }} <span class="figcaption__licence">{{ . | safeHTML }}</span>{{ end }}</p>{{- end -}}
                {{- if .Params.attrlink -}}
                  </a>
                {{- end -}}
            {{- end -}}
            {{- with .Get "title" -}}<h4 class="figcaption__title">{{ . | markdownify | safeHTML }}</h4>{{- end -}}
            {{- with .Get "caption" -}}
              <p class="figcaption__caption">{{ . | markdownify | safeHTML }}</p>
            {{- end -}}
        </figcaption>
    {{- end -}}
</figure>