archive
/
jyosei-guide
mirror of https://github.com/project-trans/jyosei-guide
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

improve figure preview

pull/5/head
Septs 2022-08-07 17:23:16 +08:00
parent 3c8f833d06
commit bbd6c1fb51
No known key found for this signature in database
GPG Key ID: 6C253909AE7FC3A4
2 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/_custom.scss
View File

@ -18,6 +18,11 @@ figure.audio-player audio {
width: 100%; width: 100%;
} }
img[data-thumbnail] {
background-repeat: no-repeat;
background-size: 100%;
}
.grid-list { .grid-list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));

16
layouts/shortcodes/figure.html 100644
View File

@ -0,0 +1,16 @@
{{- $src := .Get "src" -}}
{{- $resource := .Page.Resources.Get $src -}}
{{- $title := .Get "title" | default $resource.Title -}}
{{- $thumbnail := $resource.Resize "64x" | images.Filter (images.GaussianBlur 5) -}}
<figure>
<img
src="{{ $resource.Permalink }}"
width="{{ $resource.Width }}"
height="{{ $resource.Height }}"
data-thumbnail
style="background-image: url('data:{{ $thumbnail.MediaType }};base64,{{ $thumbnail.Content | base64Encode }}')"
>
{{- with $title -}}
<figcaption><h4>.</h4></figcaption>
{{- end -}}
</figure>