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

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"] mainSections = ["musics"]
paginate = 16 paginate = 16
disableKinds = ["taxonomy", "taxonomyTerm"] disableKinds = ["taxonomy", "taxonomyTerm"]
[imaging]
quality = 95

9
layouts/_default/single.html
View file

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