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

opti(album page): Improve responsive images

Browse source
This commit is contained in:
Tixie 2019-12-05 00:06:47 +01:00
parent 8ef6617b98
commit b604c4d1b2
2 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
config.toml
View file

@ -4,3 +4,6 @@ title = "Now Playing"
mainSections = ["musics"]
paginate = 16
disableKinds = ["taxonomy", "taxonomyTerm"]
[imaging]
quality = 95

9
layouts/_default/single.html
View file

@ -27,23 +27,26 @@
<div class="album">
<div class="container">
<div class="album-layout">
<div class="album-cover">
<picture class="album-cover">
{{ $original := resources.Get .Params.cover }}
{{ $coverSmall := $original.Resize "x250" }}
{{ $coverMedium := $original.Resize "x500" }}
{{ $coverBig := $original.Resize "x1000" }}
{{ $placeholder := $original.Resize "x1" }}
<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)">
<img
class="album-cover__visual"
width="500"
height="500"
style="background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});"
src="{{ $coverMedium.Permalink }}"
srcset="{{ $coverSmall.Permalink }} 250w, {{ $coverMedium.Permalink }} 500w, {{ $coverBig.Permalink }} 1000w"
alt="{{ .Title }} album's cover"
title=":)"
>
</div>
</picture>
<div class="album-infos">
<h1 class="album-name">{{ .Title }}</h1>
<strong class="album-artist">by {{ .Params.artist }}</strong>