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

    @params context Image media file.
-->

<!-- Variable assignment -->

{{- $src := . -}}
{{- $isResizable := not ( in ( slice "svg" "gif" ) $src.MediaType.SubType ) -}}

<!-- Rendering -->

<picture 
    class="picture"
    itemprop="image"
>   
    {{ if $isResizable -}}
    <source srcset="{{- ($src.Resize "1200x webp").RelPermalink -}}" />
    <source srcset="{{- ($src.Resize "800x png").RelPermalink -}}" media="(max-width: 800px)"/>
    {{- end }}
    <img 
        class="u-photo picture__image"
        {{ if not $isResizable -}}
            src="{{- $src.RelPermalink -}}"
        {{- else -}}
            src="{{- ($src.Resize "1200x webp").RelPermalink -}}"
            width="{{- $src.Width -}}"
            height="{{- $src.Height -}}"
        {{- end }}
        {{ with $src.Params.alt -}}alt="{{- . -}}"{{- end }}
        {{ with $src.Params.title -}}title="{{- . -}}" {{- end }}
        loading="lazy"
        role="img"
    />
</picture>