From bfae27980f39159963f0e470a2081485a5fa7648 Mon Sep 17 00:00:00 2001
From: stereobooster <stereobooster@gmail.com>
Date: Mon, 11 Sep 2023 10:07:09 +0200
Subject: [PATCH] LQIP prototype

---
 exampleSite/content/samples/markdown/index.md | 4 ++++
 layouts/_default/_markup/render-image.html    | 8 ++++++++
 2 files changed, 12 insertions(+)

diff --git a/exampleSite/content/samples/markdown/index.md b/exampleSite/content/samples/markdown/index.md
index 601fae2a..d9f91110 100755
--- a/exampleSite/content/samples/markdown/index.md
+++ b/exampleSite/content/samples/markdown/index.md
@@ -9,6 +9,10 @@ This article offers a sample of basic Markdown formatting that can be used in Co
 
 <!--more-->
 
+## Image
+
+![sample image](thumb-surendran-mp-IhWYiwSxm8g-unsplash.jpg)
+
 ## Headings
 
 The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index c1fe3634..892804e7 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -23,6 +23,11 @@
   {{ end }}
   {{ with $resource }}
     <figure>
+      {{ if ne .MediaType.SubType "svg" }}
+        {{ $lqip := .Resize "20x webp" }}
+        <div class="mx-auto my-0 rounded-md"
+          style="background: url(data:image/webp;base64,{{ $lqip.Content | base64Encode  }}); background-size: cover">
+      {{ end }}
       <img
         class="mx-auto my-0 rounded-md"
         {{ if eq .MediaType.SubType "svg" }}
@@ -46,6 +51,9 @@
           loading="lazy"
         {{ end }}
       />
+      {{ if ne .MediaType.SubType "svg" }}
+        </div>
+      {{ end }}
       {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ else }}