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

@@ -4,11 +4,11 @@
<div class="card-img-container">
<p class="card-img-overlay">Next Article</p>
<picture>
{{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}}
<source srcset="{{ .Permalink }}" type="image/webp">
{{- end }}
<source srcset="{{ .Permalink }}">
<img src="{{ .Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}>
{{ $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>
{{ end }}