GuerillaHQ/now-playing
GuerillaHQ/now-playing
1
0
Fork 0
mirror of https://github.com/GuerillaHQ/now-playing synced 2024-06-26 19:01:37 +00:00
Code Issues Wiki Activity

Add light jpeg fallback format for browser not supporting webp

Browse source
This commit is contained in:
Tixie 2024-04-21 20:02:31 +02:00
parent 24c29dcb8a
commit eda954cdd6
No known key found for this signature in database
2 changed files with 20 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
layouts/_default/single.html
View file

@ -30,13 +30,20 @@
<picture class="album-cover">
{{ $original := resources.Get .Params.cover }}
{{ $coverSmall := $original.Resize "x250 webp" }}
{{ $coverSmallBackup := $original.Resize "x250 jpeg q69" }}
{{ $coverMedium := $original.Resize "x500 webp" }}
{{ $coverMediumBackup := $original.Resize "x500 jpeg q69" }}
{{ $coverBig := $original.Resize "x1000 webp" }}
{{ $coverBigBackup := $original.Resize "x1000 jpeg q69" }}
{{ $placeholder := $original.Resize "x15" }}
<source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 427px)">
<source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(max-width: 480px)">
<source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 647px)">
<source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(min-width: 647px)">
<source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 427px)" type="image/webp">
<source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(max-width: 480px)" type="image/webp">
<source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 647px)" type="image/webp">
<source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(min-width: 647px)" type="image/webp">
<source srcset="{{ $coverSmallBackup.Permalink }} 1x, {{ $coverMediumBackup.Permalink }} 2x" media="(max-width: 427px)" type="image/jpeg">
<source srcset="{{ $coverMediumBackup.Permalink }} 1x, {{ $coverBigBackup.Permalink }} 2x" media="(max-width: 480px)" type="image/jpeg">
<source srcset="{{ $coverSmallBackup.Permalink }} 1x, {{ $coverMediumBackup.Permalink }} 2x" media="(max-width: 647px)" type="image/jpeg">
<source srcset="{{ $coverMediumBackup.Permalink }} 1x, {{ $coverBigBackup.Permalink }} 2x" media="(min-width: 647px)" type="image/jpeg">
<img
class="album-cover__visual"
width="500"
@ -45,7 +52,7 @@
background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});
view-transition-name: album_cover_{{ .File.BaseFileName }};
"
src="{{ $coverMedium.Permalink }}"
src="{{ $coverMediumBackup.Permalink }}"
loading="lazy"
alt="{{ .Title }} album's cover"
title=":)"

10
layouts/index.html
View file

@ -38,21 +38,26 @@
{{ $original := resources.Get .Params.cover }}
{{ $originalPermalink := $original.Permalink }}
{{ $cover := $original.Resize "x320 webp" }}
{{ $coverBackup := $original.Resize "x320 jpeg q69" }}
{{ $cover2x := $original.Resize "x640 webp" }}
{{ $cover2xBackup := $original.Resize "x640 jpeg q69" }}
{{ $placeholder := $cover.Resize "x1 png" }}
<div class="catalog-item">
<a class="catalog-item__content" href="{{ .Permalink }}">
<h2 class="catalog-item__album" style="view-transition-name: album_title_{{ .File.BaseFileName }};">{{ .Title }}</h2>
<div class="catalog-item__artist" style="view-transition-name: album_artist_{{ .File.BaseFileName }};">by {{ .Params.artist }}</div>
<picture class="catalog-item__visual">
<source srcset="{{ $cover.Permalink }} 1x, {{ $cover2x.Permalink }} 2x" type="image/webp">
<source srcset="{{ $coverBackup.Permalink }} 1x, {{ $cover2xBackup.Permalink }} 2x" type="image/jpeg">
<img
class="catalog-item__visual"
width="320"
height="320"
style="
background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});
view-transition-name: album_cover_{{ .File.BaseFileName }};
"
src="{{ $cover.Permalink }}"
src="{{ $coverBackup.Permalink }}"
srcset="{{ $cover.Permalink }} 1x, {{ $cover2x.Permalink }} 2x"
{{ if ( gt $albumIndex 3) }}
loading="lazy"
@ -61,6 +66,7 @@
alt="{{ .Title }} album's cover"
title="{{ .Title }} album's cover"
>
</picture>
</a>
</div>
{{ end }}