LQIP prototype

2023-09-12 11:47:39 +02:00
7 changed files with 132 additions and 115 deletions
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@ -1159,13 +1159,6 @@ body:has(#menu-controller:checked) {
  margin-right: 0px;
 }

-/* LQIP */
-
-picture > img {
-  -webkit-backdrop-filter: blur(10px);
-          backdrop-filter: blur(10px);
-}
-
 /* Code Copy */

 .highlight-wrapper {
--- a/assets/css/main.css
+++ b/assets/css/main.css
@ -73,11 +73,6 @@ body:has(#menu-controller:checked) {
  @apply rtl:mr-0;
 }

-/* LQIP */
-picture > img {
-  backdrop-filter: blur(10px);
-}
-
 /* Code Copy */
 .highlight-wrapper {
  @apply block;
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@ -12,8 +12,6 @@ autoSwitchAppearance = true
 enableSearch = true
 enableCodeCopy = true
 enableImageLazyLoading = true
-enableWebp = true
-enableLqip = true

 # robots = ""
 fingerprintAlgorithm = "sha256"
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@ -1,4 +1,72 @@
-<figure>
-  {{ partial "picture.html" (dict "context" . "src" .Destination "alt" .Text) }}
-  {{ with .Title }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-</figure>
+{{ $url := urls.Parse .Destination }}
+{{ $altText := .Text }}
+{{ $caption := .Title }}
+{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }}
+{{ if findRE "^https?" $url.Scheme }}
+  <figure>
+    <img
+      class="mx-auto my-0 rounded-md"
+      src="{{ $url.String }}"
+      alt="{{ $altText }}" 
+      {{ if $lazyLoad }}
+        loading="lazy"
+      {{ end }}
+    />
+    {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
+  </figure>
+{{ else }}
+  {{ $resource := "" }}
+  {{ if $.Page.Resources.GetMatch ($url.String) }}
+    {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
+  {{ else if resources.GetMatch ($url.String) }}
+    {{ $resource = resources.Get ($url.String) }}
+  {{ 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 }}
+            srcset="
+            {{- (.Resize "330x").RelPermalink }} 330w,
+            {{- (.Resize "660x").RelPermalink }} 660w,
+            {{- (.Resize "1024x").RelPermalink }} 1024w,
+            {{- (.Resize "1320x").RelPermalink }} 2x"
+            src="{{ (.Resize "660x").RelPermalink }}"
+          {{ end }}
+        {{ end }}
+        alt="{{ $altText }}"
+        {{ if $lazyLoad }}
+          loading="lazy"
+        {{ end }}
+      />
+      {{ if ne .MediaType.SubType "svg" }}
+        </div>
+      {{ end }}
+      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
+    </figure>
+  {{ else }}
+    <figure>
+      <img
+        class="mx-auto my-0 rounded-md"
+        src="{{ $url.String }}"
+        alt="{{ $altText }}"
+        {{ if $lazyLoad }}
+          loading="lazy"
+        {{ end }}
+      />
+      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
+    </figure>
+  {{ end }}
+{{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -1,8 +1,7 @@
 {{ define "main" }}
  {{- $images := .Resources.ByType "image" }}
  {{- $cover := $images.GetMatch (.Params.cover | default "*cover*") }}
-  {{- $feature := (.Params.feature | default "*feature*") | default $cover }}
-  {{- $featureImg := $images.GetMatch $feature }}
+  {{- $feature := $images.GetMatch (.Params.feature | default "*feature*") | default $cover }}
  <article>
    <header class="max-w-prose">
      {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
@ -14,10 +13,27 @@
      <div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
        {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
      </div>
-      {{ if $featureImg }}
+      {{ with $feature }}
        <div class="prose">
-          {{ $alt := $.Params.featureAlt | default $.Params.coverAlt | default "" }}
-          {{ partial "picture.html" (dict "context" . "src" $feature "alt" $alt "class" "mb-6 -mt-4 rounded-md") }}
+          <img
+            class="mb-6 -mt-4 rounded-md"
+            {{ if eq .MediaType.SubType "svg" }}
+              src="{{ .RelPermalink }}"
+            {{ else }}
+              width="{{ .Width }}"
+              height="{{ .Height }}"
+              {{ if lt .Width 660 }}
+                src="{{ .RelPermalink }}"
+              {{ else }}
+                srcset="
+                {{- (.Resize "330x").RelPermalink }} 330w,
+                {{- (.Resize "660x").RelPermalink }} 660w,
+                {{- (.Resize "1024x").RelPermalink }} 1024w,
+                {{- (.Resize "1320x").RelPermalink }} 2x"
+              {{ end }}
+            {{ end }}
+            alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
+          />
          {{ with $.Params.coverCaption }}
            <figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>
          {{ end }}
--- a/layouts/partials/picture.html
+++ b/layouts/partials/picture.html
@ -1,89 +0,0 @@
-{{ $url := urls.Parse .src }}
-{{ $altText := .alt }}
-{{ $class := .class | default "mx-auto my-0 rounded-md" }}
-
-{{ $lazyLoad := .context.Page.Site.Params.enableImageLazyLoading | default true }}
-{{ $webp := .context.Page.Site.Params.enableWebp | default true }}
-{{ $lqip := .context.Page.Site.Params.enableLqip | default true }}
-
-{{ if findRE "^https?" $url.Scheme }}
-  <img
-    class="{{ $class }}"
-    src="{{ $url.String }}"
-    alt="{{ $altText }}" 
-    {{ if $lazyLoad }}
-      loading="lazy"
-    {{ end }}
-  />
-{{ else }}
-  {{ $resource := "" }}
-  {{ if .context.Page.Resources.GetMatch ($url.String) }}
-    {{ $resource = .context.Page.Resources.GetMatch ($url.String) }}
-  {{ else if resources.GetMatch ($url.String) }}
-    {{ $resource = resources.Get ($url.String) }}
-  {{ end }}
-  {{ with $resource }}
-    {{ if (and (ne .MediaType.SubType "svg") $lqip) }}
-      {{ $lqip := (.Resize "20x webp").Content | base64Encode }}
-      <picture 
-        style="background: url(data:image/webp;base64,{{ $lqip }}); background-size: cover"
-        class="{{ $class }}"
-      >
-    {{ else }}
-      <picture>
-    {{ end }}
-      {{ if (and (ne .MediaType.SubType "svg") $webp) }}
-        <source 
-          {{ if lt .Width 660 }}
-            {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
-              src="{{ .RelPermalink }}"
-            {{ end }}
-          {{ else }}
-            srcset="
-              {{- (.Resize "330x webp").RelPermalink }} 330w,
-              {{- (.Resize "660x webp").RelPermalink }} 660w,
-              {{- (.Resize "1024x webp").RelPermalink }} 1024w,
-              {{- (.Resize "1320x webp").RelPermalink }} 2x"
-            src="{{ (.Resize "660x webp").RelPermalink }}" 
-          {{ end }}
-          type="image/webp" 
-        />
-      {{ end }}
-      <img
-        class="{{ $class }}"
-        {{ if eq .MediaType.SubType "svg" }}
-          src="{{ .RelPermalink }}"
-        {{ else }}
-          width="{{ .Width }}"
-          height="{{ .Height }}"
-          decoding="async"
-          {{ if lt .Width 660 }}
-            src="{{ .RelPermalink }}"
-          {{ else }}
-            srcset="
-            {{- (.Resize "330x").RelPermalink }} 330w,
-            {{- (.Resize "660x").RelPermalink }} 660w,
-            {{- (.Resize "1024x").RelPermalink }} 1024w,
-            {{- (.Resize "1320x").RelPermalink }} 2x"
-            src="{{ (.Resize "660x").RelPermalink }}"
-          {{ end }}
-        {{ end }}
-        alt="{{ $altText }}"
-        {{ if $lazyLoad }}
-          loading="lazy"
-        {{ end }}
-      />
-    </picture>
-  {{ else }}
-    <img
-      class="{{ $class }}"
-      src="{{ $url.String }}"
-      alt="{{ $altText }}"
-      {{ if $lazyLoad }}
-        loading="lazy"
-      {{ end }}
-    />
-  {{ end }}
-{{ end }}
-
-
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@ -1,14 +1,50 @@
 {{ if .Get "default" }}
  {{ template "_internal/shortcodes/figure.html" . }}
 {{ else }}
-  {{ $src := .Get "src" }}
-  {{ $alt := .Get "alt" }}
+  {{ $url := urls.Parse (.Get "src") }}
+  {{ $altText := .Get "alt" }}
  {{ $caption := .Get "caption" }}
  {{ $href := .Get "href" }}
  {{ $class := .Get "class" }}
  <figure{{ with $class }} class="{{ . }}"{{ end }}>
    {{ with $href }}<a href="{{ . }}">{{ end }}
-    {{ partial "picture.html" (dict "context" . "src" $src "alt" $alt) }}
+    <img
+      class="mx-auto my-0 rounded-md"
+      alt="{{ $altText }}"
+      {{ if .Site.Params.enableImageLazyLoading | default true }}
+        loading="lazy"
+      {{ end }}
+      {{ if findRE "^https?" $url.Scheme }}
+        src="{{ $url.String }}"
+      {{ else }}
+        {{ $resource := "" }}
+        {{ if $.Page.Resources.GetMatch ($url.String) }}
+          {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
+        {{ else if resources.GetMatch ($url.String) }}
+          {{ $resource = resources.Get ($url.String) }}
+        {{ end }}
+        {{ with $resource }}
+          {{ if eq .MediaType.SubType "svg" }}
+            src="{{ .RelPermalink }}"
+          {{ else }}
+            width="{{ .Width }}"
+            height="{{ .Height }}"
+            {{ if lt .Width 660 }}
+              src="{{ .RelPermalink }}"
+            {{ else }}
+              srcset="
+              {{- (.Resize "330x").RelPermalink }} 330w,
+              {{- (.Resize "660x").RelPermalink }} 660w,
+              {{- (.Resize "1024x").RelPermalink }} 1024w,
+              {{- (.Resize "1320x").RelPermalink }} 2x"
+              src="{{ (.Resize "660x").RelPermalink }}"
+            {{ end }}
+          {{ end }}
+        {{ else }}
+          src="{{ $url.String }}"
+        {{ end }}
+      {{ end }}
+    />
    {{ with $href }}</a>{{ end }}
    {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
  </figure>