From 02f2b53f642ed69d5f4d94e5e294aa6d030450f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20M=2E=20Sapka?= <michal@sapka.me>
Date: Sat, 25 Feb 2023 19:09:29 +0100
Subject: feat: handle retina for post omages

---
 layouts/shortcodes/img-center.html     | 14 ++++++++++++--
 layouts/shortcodes/img-pull-right.html | 15 +++++++++++++--
 layouts/shortcodes/youtube.html        | 15 +++++++++++++--
 3 files changed, 38 insertions(+), 6 deletions(-)

(limited to 'layouts')

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>
-- 
cgit v1.2.3