Make images work for hight dpi screens

This commit is contained in:
Joe Hutchinson
2021-02-03 23:29:35 -05:00
parent 7b4c9a2133
commit 173e1e208e
5 changed files with 21 additions and 17 deletions

View File

@@ -3,11 +3,10 @@
{{ with .Resources.GetMatch "featuredImage" }}
<div class="card-img-container">
<picture>
{{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}}
<source srcset="{{ .Permalink }}" type="image/webp">
{{- end }}
{{ $thumbnail := .Fit "800x600 Lanczos" }}
<source srcset="{{ $thumbnail.Permalink }}">
{{ $thumbnail := .Resize "400x Lanczos" }}
{{ $thumbnail_2 := .Resize "800x Lanczos" }}
{{ $thumbnail_3 := .Resize "1200x Lanczos" }}
<source srcset="{{ $thumbnail.Permalink }} 1x, {{ $thumbnail_2.Permalink }} 2x, {{ $thumbnail_3.Permalink }} 3x">
<img src="{{ $thumbnail.Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
</picture>
</div>