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

37 lines
1 KiB
Cheetah
Raw Permalink Normal View History

2024-04-02 19:36:21 +00:00
<!--
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>