Merge bfae27980f into 1e90d7f077

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.

layouts/_default/_markup/render-image.html

@@ -23,11 +23,18 @@
   {{ 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" }}
           src="{{ .RelPermalink }}"
         {{ else }}
+          width="{{ .Width }}"
+          height="{{ .Height }}"
           {{ if lt .Width 660 }}
             src="{{ .RelPermalink }}"
           {{ else }}
@@ -44,6 +51,9 @@
           loading="lazy"
         {{ end }}
       />
+      {{ if ne .MediaType.SubType "svg" }}
+        </div>
+      {{ end }}
       {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ else }}

layouts/_default/single.html

@@ -20,6 +20,8 @@
             {{ if eq .MediaType.SubType "svg" }}
               src="{{ .RelPermalink }}"
             {{ else }}
+              width="{{ .Width }}"
+              height="{{ .Height }}"
               {{ if lt .Width 660 }}
                 src="{{ .RelPermalink }}"
               {{ else }}

layouts/partials/article-link.html

@@ -22,6 +22,8 @@
             {{- (.Fill "160x120 smart").RelPermalink }}
             160w, {{- (.Fill "320x240 smart").RelPermalink }} 2x"
             src="{{ (.Fill "160x120 smart").RelPermalink }}"
+            width="160"
+            height="120"
           {{ end }}
           {{ if $.Site.Params.enableImageLazyLoading | default true }}
             loading="lazy"

layouts/shortcodes/figure.html

@@ -27,6 +27,8 @@
           {{ if eq .MediaType.SubType "svg" }}
             src="{{ .RelPermalink }}"
           {{ else }}
+            width="{{ .Width }}"
+            height="{{ .Height }}"
             {{ if lt .Width 660 }}
               src="{{ .RelPermalink }}"
             {{ else }}