Omphaloskepsis-2/layouts/partials/media/picture.html

<!--
    Render an image in a context-appropriate format and size.

    @params src Image media file.
    @params raw Force raw image only. Optional.
-->

<!-- Variable assignment -->

{{- $src := .src -}}
{{- $hint := default ( index $src.Params "hint" ) "" }}
{{- $format := cond ( and ( isset . "raw" ) .raw ) "" "webp" -}}
{{- $isResizable := not ( in ( slice "svg" "gif" ) $src.MediaType.SubType ) -}}


<!-- Rendering -->

<picture
  class="picture"
  itemprop="image"
>
  {{ if $isResizable -}}
    <source 
      srcset="{{- partialCached "images/get-image.html" ( dict "img" $src "size" "same" "format" $format ) $src.Title -}}"
    />
    {{- if gt $src.Width 1200 -}}
      <source 
        srcset="{{- partialCached "images/get-image.html" ( dict "img" $src "size" "1200x" "format" $format ) ( printf "%s-1200x" $src.Title ) -}}" 
        media="(max-width: 1200px)"
      />
    {{- end -}}
    {{- if gt $src.Width 800 -}}
      <source
        srcset="{{- partialCached "images/get-image.html" ( dict "img" $src "size" "800x" "format" $format ) ( printf "%s-800x" $src.Title ) -}}"
        media="(max-width: 800px)"
      />
    {{- end -}}
  {{- end }}
  <img
    class="u-photo picture__image"
    {{ if not $isResizable -}}
      src="{{- $src.RelPermalink -}}"
    {{- else -}}
      src="{{- partialCached "images/get-image.html" ( dict "img" $src "format" $format ) $src.Title -}}" 
      width="{{- $src.Width -}}"
      height="{{- $src.Height -}}"
    {{- end }}
    {{ with $src.Params.alt -}}alt="{{- . -}}"{{- end }}
    {{ with $src.Params.title -}}title="{{- . -}}"{{- end }}
    loading="lazy"
    role="img"
  />
</picture>