diff options
| author | Michał M. Sapka <michal@sapka.me> | 2023-02-25 19:09:29 +0100 |
|---|---|---|
| committer | Michał M. Sapka <michal@sapka.me> | 2023-02-25 19:09:29 +0100 |
| commit | 02f2b53f642ed69d5f4d94e5e294aa6d030450f0 (patch) | |
| tree | b7f5a68283c1d630b641b4ed3a23c0ee814d8a5a /layouts | |
| parent | 4113d544cd36d265e0f6750b7ad86f2f1a4fb33f (diff) | |
feat: handle retina for post omages
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/shortcodes/img-center.html | 14 | ||||
| -rw-r--r-- | layouts/shortcodes/img-pull-right.html | 15 | ||||
| -rw-r--r-- | layouts/shortcodes/youtube.html | 15 |
3 files changed, 38 insertions, 6 deletions
diff --git a/layouts/shortcodes/img-center.html b/layouts/shortcodes/img-center.html index a7206c3..ee6425a 100644 --- a/layouts/shortcodes/img-center.html +++ b/layouts/shortcodes/img-center.html @@ -3,9 +3,19 @@ {{- $img := resources.Get $path }} {{- $caption := .Get 1 }} {{- $source := .Get 2 }} -{{- $img = $img.Resize "500x webp q90"}} +{{- $img1x := $img.Resize "500x webp q90"}} +{{- $img2x := $img.Resize "1000x webp q90"}} <figure> - <img class="centered" alt="{{ $caption }}" src="{{ $img.RelPermalink }}" width="{{ $img.Width }}" height="{{ $img.Height }}"> + <img + class="centered" + alt="{{ $caption }}" + src="{{ $img1x.RelPermalink }}" + srcset=" + {{ $img1x.RelPermalink }} 1x, + {{ $img2x.RelPermalink }} 2x, + " + width="{{ $img1x.Width }}" + height="{{ $img1x.Height }}"> <figcaption> {{ $caption }} diff --git a/layouts/shortcodes/img-pull-right.html b/layouts/shortcodes/img-pull-right.html index 8d73f48..4688b59 100644 --- a/layouts/shortcodes/img-pull-right.html +++ b/layouts/shortcodes/img-pull-right.html @@ -1,6 +1,17 @@ {{- $file := .Get 0 }} {{- $path := printf "content_images/%s" $file}} {{- $img := resources.Get $path }} -{{- $img = $img.Resize "150x webp" }} +{{- $img1x := $img.Resize "150x webp" }} +{{- $img2x := $img.Resize "300x webp" }} {{- $caption := .Get 1}} - <img class="float-right" alt="{{ $caption }}" src="{{ $img.Permalink }}" width="{{ $img.Width }}" height="{{ $img.Height }}"> + <img + class="float-right" + alt="{{ $caption }}" + src="{{ $img1x.Permalink }}" + srcset=" + {{ $img1x.RelPermalink }} 1x, + {{ $img2x.RelPermalink }} 2x, + " + width="{{ $img1x.Width }}" + height="{{ $img1x.Height }}" +> diff --git a/layouts/shortcodes/youtube.html b/layouts/shortcodes/youtube.html index 3003f34..a4d419b 100644 --- a/layouts/shortcodes/youtube.html +++ b/layouts/shortcodes/youtube.html @@ -2,10 +2,21 @@ {{- $title := .Get 1 }} {{- $path := printf "ytcovers/%s.jpg" $id}} {{- $img := resources.Get $path }} -{{- $img = $img.Resize "x300 webp q90" }} +{{- $img1x := $img.Resize "x300 webp q90" }} +{{- $img2x := $img.Resize "x600 webp q90" }} <center> <a href="https://www.youtube.com/watch?v={{$id}}" target="_blank"> - <img src="{{$img.Permalink}}" alt="{{$title}} on Youtube" width="{{$img.Width}}" height="{{$img.Height}}"/> + <img + src="{{ $img1x.Permalink }}" + srcset=" + {{ $img1x.RelPermalink }} 1x, + {{ $img2x.RelPermalink }} 2x, + " + width="{{ $img1x.Width }}" + height="{{ $img1x.Height }}" + alt="{{$title}} on Youtube" + width="{{$img.Width}}" + height="{{$img.Height}}"/> </a> </center> |