Add retina support for image shortcodes

2 files changed, 16 insertions, 14 deletions

diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
index 8408a19..32f2fec 100644
--- a/layouts/shortcodes/image.html
+++ b/layouts/shortcodes/image.html
@@ -1,11 +1,10 @@
 <picture>

-    {{ if (fileExists (printf "%s/%s" "content" (replace (.Get "src") (path.Ext (.Get "src")) ".webp"))) -}}

-        <source srcset="{{ replace (.Get "src") (path.Ext (.Get "src")) ".webp" | absURL }}" type="image/webp">

-    {{- end }}

     {{ $image := $.Page.Resources.GetMatch (.Get "src") }}

-    {{ if gt $image.Width 800 -}}

-        {{ $resized := $image.Resize "800x Lanczos" }}

-        <source srcset="{{ $resized.Permalink }}">

+    {{ if gt $image.Width 711 -}}

+        {{ $resized := $image.Resize "711x Lanczos" }}

+        {{ $resized_2 := $image.Resize "1422x Lanczos" }}

+        {{ $resized_3 := $image.Resize "2133x Lanczos" }}

+        <source srcset="{{ $resized.Permalink }} 1x, {{ $resized_2.Permalink }} 2x, {{ $resized_3.Permalink }} 3x">

         <img src="{{ $resized.Permalink }}" {{ if isset .Params "alt" -}} alt="{{ .Get "alt"}}" {{- end }}>

     {{ else }}

         <source srcset="{{ $image.Permalink }}">

diff --git a/layouts/shortcodes/smallimg.html b/layouts/shortcodes/smallimg.html
index b0be56a..f232ac3 100644
--- a/layouts/shortcodes/smallimg.html
+++ b/layouts/shortcodes/smallimg.html
@@ -1,15 +1,18 @@
 <picture class="small-pic {{ if eq .Params.clear "true" -}} clear {{- end }}">

-    {{ if (fileExists (printf "%s/%s" "content" (replace (.Get "src") (path.Ext (.Get "src")) ".webp"))) -}}

-        <source srcset="{{ replace (.Get "src") (path.Ext (.Get "src")) ".webp" | absURL }}" type="image/webp">

-    {{- end }}

     {{ $image := $.Page.Resources.GetMatch (.Get "src") }}

-    {{ if or (gt $image.Width 1600) (and (isset .Params "width") (gt $image.Width (.Get "width"))) -}}

-        {{ $.Scratch.Set "imgwidth" "1600" }}

-        {{ if and (isset .Params "width") (lt (.Get "width") 1600) -}}

-            {{ $.Scratch.Set "imgwidth" (mul (int (trim (.Get "width") "px")) 2) }}

+    {{ if or (gt $image.Width 711) (and (isset .Params "width") (gt $image.Width (.Get "width"))) -}}

+        {{ $.Scratch.Set "imgwidth" "711" }}

+        {{ $.Scratch.Set "imgwidth_2" "1422" }}

+        {{ $.Scratch.Set "imgwidth_3" "2133" }}

+        {{ if and (isset .Params "width") (lt (.Get "width") 711) -}}

+            {{ $.Scratch.Set "imgwidth" (int (trim (.Get "width") "px")) }}

+            {{ $.Scratch.Set "imgwidth_2" (mul (int (trim (.Get "width") "px")) 2) }}

+            {{ $.Scratch.Set "imgwidth_3" (mul (int (trim (.Get "width") "px")) 3) }}

         {{- end }}

         {{ $resized := $image.Resize (printf "%dx Lanczos" ($.Scratch.Get "imgwidth")) }}

-        <source srcset="{{ $resized.Permalink }}">

+        {{ $resized_2 := $image.Resize (printf "%dx Lanczos" ($.Scratch.Get "imgwidth_2")) }}

+        {{ $resized_3 := $image.Resize (printf "%dx Lanczos" ($.Scratch.Get "imgwidth_3")) }}

+        <source srcset="{{ $resized.Permalink }} 1x, {{ $resized_2.Permalink }} 2x, {{ $resized_3.Permalink }} 3x">

         <img src="{{ $resized.Permalink }}" class="small-img {{ if isset .Params "smartfloat" -}}

                 {{- if eq .Params.smartfloat "left" -}}

                     smartfloat-left