Rumperuu/Omphaloskepsis-2
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: video galleries

Browse source
This commit is contained in:
Ben Goldsworthy 2025-05-05 21:27:09 +02:00
parent 5a1e4fc252
commit ff9c90f68b
No known key found for this signature in database
2 changed files with 44 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

14
assets/css/components/_gallery.scss
View file

@ -9,4 +9,18 @@
grid-column-end: -1; grid-column-end: -1;
grid-column-start: 1; grid-column-start: 1;
} }
& .figure {
margin-trim: unset;
@supports not (margin-trim: block) {
&:first-child {
margin-block-start: 16px;
}
&:last-child {
margin-block-end: unset;
}
}
}
} }

49
layouts/shortcodes/gallery.html
View file

@ -10,32 +10,43 @@
{{- with (.Get "dir") -}} {{- with (.Get "dir") -}}
<!-- If a directory was specified, generate figures for all of the images in the directory --> <!-- If a directory was specified, generate figures for all of the images in the directory -->
{{- $images := $.Page.Resources.Match ( print . "/*" ) }} {{- $resources := $.Page.Resources.Match ( print . "/*" ) }}
{{- range $images -}} {{- range $resources -}}
{{- $caption := .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension --> {{- $caption := .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
{{- $linkURL := print $.Page.Permalink ($.Get "dir") "/" .Name | absURL }}<!-- absolute URL to hi-res image --> {{- $linkURL := print $.Page.Permalink ($.Get "dir") "/" .Name | absURL }}<!-- absolute URL to hi-res image -->
<figure class="figure gallery__figure" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <figure class="figure gallery__figure" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="{{ .RelPermalink }}" itemprop="contentUrl"> <a href="{{ .RelPermalink }}" itemprop="contentUrl">
<picture class="figure__picture" {{- if eq .ResourceType "image" -}}
<picture class="figure__picture"
itemprop="image"> itemprop="image">
<img itemprop="thumbnail" <img itemprop="thumbnail"
class="u-photo gallery__thumbnail" class="u-photo gallery__thumbnail"
{{ if ( or ( eq .MediaType.SubType "svg" ) ( eq .MediaType.SubType "gif" ) ) }} {{ if ( or ( eq .MediaType.SubType "svg" ) ( eq .MediaType.SubType "gif" ) ) }}
src="{{ .RelPermalink }}"
{{ else }}
{{ with .Resize "600x webp" }}
src="{{ .RelPermalink }}" src="{{ .RelPermalink }}"
{{ else }}
{{ with .Resize "600x webp" }}
src="{{ .RelPermalink }}"
{{ end }}
width="{{ .Width }}"
height="{{ .Height }}"
{{ end }} {{ end }}
width="{{ .Width }}" {{- with .Params.alt }}
height="{{ .Height }}" alt="{{ . }}"
{{ end }} {{- end -}}
{{- with .Params.alt }} {{- with .Params.title }} title="{{ . }}" {{ end -}}
alt="{{ . }}" loading="lazy"
{{- end -}} >
{{- with .Params.title }} title="{{ . }}" {{ end -}} </picture>
loading="lazy" {{- else if eq .ResourceType "video" -}}
> {{- if eq .MediaType "video/ogg" -}}
</picture> {{- partial "media/audio.html" . -}}
{{- else -}}
{{- partial "media/video.html" ( dict "src" . "page_file_path" $.Page.File.Path ) -}}
{{- end -}}
{{- else if ( or ( ne .ResourceType "image" ) ( ne .ResourceType "video" ) ) -}}
{{- errorf "No handling for resource of type %q" .ResourceType -}}
{{- end -}}
</a> </a>
{{- if or ( .Params.title ) ( .Params.attr ) -}} {{- if or ( .Params.title ) ( .Params.attr ) -}}
<figcaption class="figure__caption{{ if not .Params.title }} figure__caption--no-height{{ end }}"> <figcaption class="figure__caption{{ if not .Params.title }} figure__caption--no-height{{ end }}">