update

layouts/partials/media/audio.html.tmpl

@@ -0,0 +1,12 @@
+<!--
+    Render an audio track in an interactive player.
+
+    @params context The audio media file.
+-->
+
+{{- $src := . -}}
+
+<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>

layouts/partials/media/picture.html.tmpl

@@ -0,0 +1,37 @@
+<!--
+    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>

layouts/partials/media/video.html.tmpl

@@ -0,0 +1,27 @@
+<!--
+    Render a video in an interactive player.
+
+    @params context Video media file.
+    @params page_file_path  Filepath of the calling file for error messages.
+-->
+
+{{- $src := . -}}
+
+<video
+    class="u-video figure__video"
+    controls
+    itemprop="video"
+    src="{{ $src.RelPermalink }}"
+    poster="
+    {{- if $src.Params.poster -}}
+        {{- $posterSrc := $.Page.Resources.GetMatch ( .Get $src.Params.poster ) -}}
+        {{- with $posterSrc.Resize "1200x webp" -}}
+            {{- .RelPermalink -}}
+        {{- end -}}
+    {{- else -}}
+        {{- erroridf "a11y-video-poster" "No poster defined for resource %q (%q)" $src.RelPermalink .page_file_path -}}
+    {{- end -}}
+    "
+>
+    Your browser doesn't support embedded video, <a href="{{ $src.RelPermalink }}">view the video here</a>.
+</video>