dhorn/Protocol-oral-history-project
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

adds headshot resource support

Browse Source
This commit is contained in:
Drew
2025-04-25 21:33:57 -06:00
parent b89373b478
commit 451e860697
14 changed files with 122 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
layouts/articles/single.html
View File

@ -5,14 +5,16 @@
<header class="mb-4 wompum-container wompum-container--wide-gap aspect-2/1 md:aspect-3/1">{{ partial "article-wompum.html" . }}</header>
<div class="flex md:flex-row flex-col gap-4 mt-4">
<aside class="md:sticky md:top-0 md:h-screen md:overflow-y-auto lg:w-1/3 p-4 font-iosevka
{{ if .Params.headshot }}-mt-24{{ end }}
">
{{ if .Params.headshot }}
<div class="narrator__container w-48 mb-2 mx-auto md:mx-0 bg-white rounded-full border-4 border-white" data-text="{{ .Params.narrator }}">
<div class="narrator__frame">
<img src="{{ .Params.headshot }}" alt="Photo of {{ .Params.narrator }}" class="narrator__image" loading="lazy">
</div>
<aside class="md:sticky md:top-24 md:h-screen lg:w-1/3 p-4 font-iosevka">
{{ $headshot := resources.GetMatch (printf "**/%s" (strings.TrimPrefix "/" .Params.headshot)) }}
{{ if and .Params.headshot $headshot }}
<div class="narrator__container -mt-24" data-text="{{ .Params.narrator }}">
{{ partial "image.html" (dict
"resource" $headshot
"width" "192"
"class" "narrator__frame"
"alt" (printf "Photo of %s" .Params.narrator)
) }}
</div>
{{ end }}
<div class="md:block hidden">{{ partial "article-metadata.html" . }}</div>

19
layouts/partials/image.html Normal file
View File

@ -0,0 +1,19 @@
{{ $width := .width }}
{{ $height := default $width .height }}
{{ $class := .class }}
{{ $resource := .resource }}
{{ $alt := .alt }}
{{ with $resource }}
{{ $image := .Fit (printf "%dx%d webp" (int $width) (int $height)) }}
{{ $fallback := .Fit (printf "%dx%d" (int $width) (int $height)) }}
<picture class="{{ $class }} block">
<source srcset="{{ $image.RelPermalink }}" type="image/webp">
<img
src="{{ $fallback.RelPermalink }}"
alt="{{ $alt }}"
width="{{ $width }}"
height="{{ $height }}"
loading="lazy">
</picture>
{{ end }}