GuerillaStudio/now-playing
GuerillaStudio/now-playing
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/now-playing synced 2024-11-09 14:31:51 +00:00
Code Issues Activity Actions

Add light jpeg fallback format for browser not supporting webp

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

10
layouts/index.html
View file

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