Make images work for hight dpi screens

2021-02-03 23:29:35 -05:00
parent 7b4c9a2133
commit 173e1e208e
5 changed files with 21 additions and 17 deletions
--- a/layouts/_default/home.html
+++ b/layouts/_default/home.html
@@ -12,7 +12,13 @@
        </div>
        {{ with resources.GetMatch .Site.Params.headshotimg -}}
        <div class="home-faceshot-card">
-          <img class="home-faceshot" src="{{ .Permalink }}" >
+          <picture>
+            {{ $faceshot := .Resize "272x Lanczos" }}
+            {{ $faceshot_x2 := .Resize "544x Lanczos" }}
+            {{ $faceshot_x3 := .Resize "816x Lanczos" }}
+            <source srcset="{{ $faceshot.Permalink }} 1x, {{ $faceshot_x2.Permalink }} 2x, {{ $faceshot_x3.Permalink }} 3x">
+            <img class="home-faceshot" src="{{ $faceshot.Permalink }}" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
+          </picture>
        </div>
        {{ end -}}
      </header>