WIP: @CaiJimmy/hugo-theme-stackCaiJimmy#766

ottok · Feb 24, 2024 · 24c2826 · 24c2826
1 parent bf86591
commit 24c2826
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 23 deletions.
diff --git a/assets/ts/gallery.ts b/assets/ts/gallery.ts
@@ -16,7 +16,7 @@ export default (container: HTMLElement) => {
     /// The process of wrapping image with figure tag is done using JavaScript instead of only Hugo markdown render hook
     /// because it can not detect whether image is being wrapped by a link or not
     /// and it lead to a invalid HTML construction (<a><figure><img></figure></a>)
-    const images = container.querySelectorAll('img.gallery-image') as NodeListOf<HTMLImageElement>;
+    const images = container.querySelectorAll('picture.gallery-image') as NodeListOf<HTMLImageElement>;
     for (const img of Array.from(images)) {
         /// Images are wrapped with figure tag if the paragraph has only images without texts
         /// This is done to allow inline images within paragraphs
@@ -48,9 +48,10 @@ export default (container: HTMLElement) => {
         figure.appendChild(el);
 
         /// Add figcaption if it exists
-        if (img.hasAttribute('alt')) {
+        const childImg = img.querySelector('img')
+        if (childImg.hasAttribute('alt')) {
             const figcaption = document.createElement('figcaption');
-            figcaption.innerText = img.getAttribute('alt');
+            figcaption.innerText = childImg.getAttribute('alt');
             figure.appendChild(figcaption);
         }
 
@@ -89,4 +90,4 @@ export default (container: HTMLElement) => {
     if (currentGallery.length > 0) {
         wrap(currentGallery);
     }
-};
+};
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
@@ -9,6 +9,7 @@
 {{- $resizableTypes := .Page.Site.Params.ImageProcessing.ResizableTypes -}}
 {{- $galleryImage := false -}}
 
+<picture
 {{- if $image -}}
 	{{- $type := $image.MediaType.SubType -}}
 	{{- $allowed := in $allowedTypes $type -}}
@@ -20,19 +21,38 @@
 		{{- $Width = $image.Width -}}
 		{{- $Height = $image.Height -}}
 		{{- $galleryImage = true -}}
+	{{- end -}}
 
-		{{- if $imageProcessing -}}
-			{{- $keys := slice "small" "big" -}}
-			{{- range $keys -}}
-				{{- with (index $.Page.Site.Params.ImageProcessing.Content .) -}}
-					{{- if gt $Width .Threshold -}}
-						{{- $resized := $image.Resize (printf "%dx" .Width) -}}
-						{{- $Srcset = $Srcset | append (printf `%s %dw` $resized.RelPermalink .Width) -}}
-					{{- end -}}
+	{{ if $galleryImage }}
+			class="gallery-image"
+			data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
+			data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
+	{{ end }}
+{{- end -}}
+>
+
+{{- if $image -}}
+	{{- $Permalink = $image.RelPermalink -}}
+	{{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
+		{{- $small := $image.Resize `webp 480x` -}}
+		{{- $big := $image.Resize `webp 1024x` -}}
+		{{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
+
+		<source type="image/webp"
+			srcset="{{ $Srcset }}"
+		>
+
+	{{- if $imageProcessing -}}
+		{{- $keys := slice "small" "big" -}}
+		{{- range $keys -}}
+			{{- with (index $.Page.Site.Params.ImageProcessing.Content .) -}}
+				{{- if gt $Width .Threshold -}}
+					{{- $resized := $image.Resize (printf "%dx" .Width) -}}
+					{{- $Srcset = $Srcset | append (printf `%s %dw` $resized.RelPermalink .Width) -}}
 				{{- end -}}
 			{{- end -}}
-			{{- $Srcset = $Srcset | append (printf `%s %dw` $Permalink $Width) -}}
 		{{- end -}}
+		{{- $Srcset = $Srcset | append (printf `%s %dw` $Permalink $Width) -}}
 	{{- end -}}
 {{- end -}}
 
@@ -41,12 +61,10 @@
 	{{ with $Height }}height="{{ . }}"{{ end }}
 	{{ with $Srcset }}srcset="{{ delimit . `, ` }}"{{ end }}
 	loading="lazy"
+	decoding="async"
 	{{ with $alt }}
 		alt="{{ . }}"
 	{{ end }}
-	{{ if $galleryImage }}
-		class="gallery-image" 
-		data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
-		data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
-	{{ end }}
 >
+
+</picture>
diff --git a/layouts/partials/article/components/header.html b/layouts/partials/article/components/header.html
@@ -8,8 +8,13 @@
                     {{- $Width := $image.resource.Width -}}
                     {{- $Height := $image.resource.Height -}}
                     {{- $Srcset := slice -}}
-
+
+                    <picture>
                     {{- if .Page.Site.Params.ImageProcessing.Cover.Enabled -}}
+                        {{- $thumbnail := $image.resource.Resize "webp 800x" -}}
+                        {{- $thumbnailRetina := $image.resource.Resize "webp 1600x" -}}
+                        {{- $Srcset = printf "%s 800w, %s 1600w" $thumbnail.RelPermalink $thumbnailRetina.RelPermalink -}}
+                        <source type="image/webp" srcset="{{ $Srcset }}" />
                         {{- $keys := slice "small" "big" -}}
                         {{- range $keys -}}
                             {{- with (index $.Page.Site.Params.ImageProcessing.Cover .) -}}
@@ -24,10 +29,11 @@
 
                     <img src="{{ $Permalink }}"
                         {{ with $Srcset }}srcset="{{ delimit . `, ` }}"{{ end }}
-                        width="{{ $Width }}" 
-                        height="{{ $Height }}" 
-                        loading="lazy"
+                        width="{{ $Width }}"
+                        height="{{ $Height }}"
+                        decoding="async"
                         alt="Featured image of post {{ .Title }}" />
+                    </picture>
                 {{ else }}
                     <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
                 {{ end }}
@@ -36,4 +42,4 @@
     {{ end }}
 
     {{ partialCached "article/components/details" . .RelPermalink }}
-</header>
+</header>