Convert all images to webp when possible

content/writeups/google-ctf/2021/beginners-quest/8.md

@@ -47,7 +47,7 @@ I see you are a person of many qualities. I must say I am impressed. One last th
 
 [attachment.zip](/files/writeups/google-ctf/2021/beginners-quest/8/attachment.zip)
 
-{{< figure class="small" src="/img/writeups/google-ctf/2021/beginners-quest/8/hideandseek.png" title="hideandseek.png" >}}
+{{< figure class="small" src="/img/writeups/google-ctf/2021/beginners-quest/8/hideandseek.png" title="hideandseek.png" raw=true >}}
 
 _Note: The image is supposed to look like half is missing._
 

themes/maik-blog/layouts/_default/list.html

@@ -44,15 +44,7 @@
 
             {{- if .Params.Cover }}
             <figure class="post-cover">
-                {{- $img := imageConfig (printf "static/%s" .Params.Cover) }}
+                {{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify)) }}
-
-                {{- if .Params.UseRelativeCover }}
-                <img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}" alt="{{ .Title | plainify | default " " }}"
-                    width="{{ $img.Width }}" height="{{ $img.Height }}" />
-                {{- else }}
-                <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title | plainify | default " " }}"
-                    width="{{ $img.Width }}" height="{{ $img.Height }}" />
-                {{- end }}
 
                 {{- if .Params.CoverCaption }}
                 <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>

themes/maik-blog/layouts/_default/single.html

@@ -23,9 +23,9 @@
         <hr />
         {{- end }}
 
-        {{ with .Params.Cover }}
+        {{- with .Params.Cover }}
-        <img src="/{{ . }}" class="post-cover" />
+        {{- partial "image.html" (dict "path" . "alt" "" "class" "post-cover") }}
-        {{ end }}
+        {{- end }}
 
         <div class="post-content">
             {{ .Content }}

themes/maik-blog/layouts/index.html

@@ -2,9 +2,7 @@
 <main role="main" style="">
     <div>
         {{- if .Site.Params.Portrait.Path }}
-        {{- $img := imageConfig (printf "static/%s" .Site.Params.Portrait.Path) }}
+        {{- partial "image.html" (dict "path" .Site.Params.Portrait.Path "alt" .Site.Params.Portrait.Alt "class" "circle" "style" (printf "max-width:%s" .Site.Params.Portrait.Size ))}}
-        <img src="{{ .Site.Params.Portrait.Path }}" class="circle" alt="{{ .Site.Params.Portrait.Alt }}"
-            width="{{ $img.Width }}" height="{{ $img.Height }}" style="max-width:{{ .Site.Params.Portrait.Size }}" />
         {{- end }}
 
         <h1>{{ .Site.Title }}</h1>

themes/maik-blog/layouts/partials/image.html

@@ -0,0 +1,5 @@
+{{- $img := resources.Get .path }}
+{{- $img = $img.Resize (printf "%dx%d webp" $img.Width $img.Height) }}
+<img src="{{ $img.Permalink }}" alt="{{ .alt | default " " }}" width="{{ .width | default $img.Width }}"
+  height="{{ .height | default $img.Height }}" {{- if .class}}class="{{ .class }}" {{end}}
+  {{- if .style}}style="{{ .style | safeCSS | default " " }}" {{end}} />

themes/maik-blog/layouts/partials/logo.html

@@ -2,7 +2,7 @@
     style="text-decoration: none;">
     <div class="logo">
         {{- if .Site.Params.Logo.path }}
-        <img src="{{ .Site.Params.Logo.path }}" alt="{{ .Site.Params.Logo.alt }}" />
+        {{- partial "image.html" (dict "path" .Site.Params.Logo.path "alt" .Site.Params.Logo.alt) }}
         {{- else }}
         <span class="logo__mark">></span>
         <span class="logo__text">{{- with .Site.Params.Logo.logoText }}{{ . }}{{ else }}$ cd /home/{{ end }}<span

themes/maik-blog/layouts/partials/meta-tags.html

@@ -16,8 +16,9 @@
     content="{{ if .IsHome }}{{ .Site.Params.homeSubtitle }}{{ else }}{{ .Params.description | plainify }}{{ end }}" />
 <meta property="og:url" content="{{ .Permalink }}" />
 {{- with .Params.cover }}
-<meta property="og:image" content="{{ . | absURL }}" />
+{{- $img := resources.Get . }}
-{{- $img := imageConfig (printf "static/%s" .) }}
+{{- $img = $img.Resize (printf "%dx%d png" $img.Width $img.Height) }}
+<meta property="og:image" content="{{ $img.Permalink }}" />
 <meta property="og:image:width" content="{{ $img.Width }}" />
 <meta property="og:image:height" content="{{ $img.Height }}" />
 {{- end }}
@@ -49,7 +50,9 @@
 <!-- Twitter cards -->
 <meta name="twitter:card" content="summary_large_image" />
 {{- if .Params.cover }}
-<meta name="twitter:image" content="{{ .Params.cover | absURL }}" />
+{{- $img := resources.Get .Params.cover }}
+{{- $img = $img.Resize (printf "%dx%d png" $img.Width $img.Height) }}
+<meta name="twitter:image" content="{{ $img.Permalink }}" />
 <meta name="twitter:image:alt" content="{{ .Params.title | plainify | default " " }}" />
 {{- end }}
 <meta name="twitter:title" content="{{ .Title }}" />

themes/maik-blog/layouts/portfolio/list.html

@@ -75,15 +75,7 @@
             </div>
             {{- if .Params.Cover }}
             <figure class="portfolio-cover">
-                {{- $img := imageConfig (printf "static/%s" .Params.Cover) }}
+                {{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify | default " ")) }}
-
-                {{- if .Params.UseRelativeCover }}
-                <img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}" alt="{{ .Title | plainify | default " " }}"
-                    width="{{ $img.Width }}" height="{{ $img.Height }}" />
-                {{- else }}
-                <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title | plainify | default " " }}"
-                    width="{{ $img.Width }}" height="{{ $img.Height }}" />
-                {{- end }}
 
                 {{- if .Params.CoverCaption }}
                 <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>

themes/maik-blog/layouts/portfolio/single.html

@@ -35,9 +35,7 @@
     {{- end }}
 
     {{- if .Params.Cover }}
-    {{ $img := imageConfig (printf "static/%s" .Params.Cover) }}
+    {{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify | default " ") "class" "portfolio-cover") }}
-    <img src="/{{ .Params.Cover }}" class="portfolio-cover" alt="{{ .Title | plainify | default " " }}"
-      width="{{ $img.Width }}" height="{{ $img.Height }}" />
     {{- end }}
 
     <div class="portfolio-content">

themes/maik-blog/layouts/posts/single.html

@@ -38,9 +38,7 @@
     {{- end }}
 
     {{- if .Params.Cover }}
-    {{ $img := imageConfig (printf "static/%s" .Params.Cover) }}
+    {{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify | default " ") "class" "post-cover") }}
-    <img src="/{{ .Params.Cover }}" class="post-cover" alt="{{ .Title | plainify | default " " }}"
-      width="{{ $img.Width }}" height="{{ $img.Height }}" />
     {{- end }}
 
     <div class="post-content">

themes/maik-blog/layouts/shortcodes/figure.html

@@ -3,10 +3,14 @@
   <a href="{{ .Get "link" }}" {{ with .Get "target" }} target="{{ . }}" {{ end }}{{ with .Get "rel" }} rel="{{ . }}"
     {{ end }}>
     {{- end -}}
-    <img src="{{ .Get "src" }}" {{- if or (.Get "alt") (.Get "caption") }}
+    {{- if eq (.Get "raw") true }}
+    {{- $img := resources.Get (.Get "src") }}
+    <img src="{{ $img.Permalink }}" {{- if or (.Get "alt") (.Get "caption") }}
       alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}" {{- end -}}
-      {{- with .Get "width" }} width="{{ . }}" {{ end -}} {{- with .Get "height" }} height="{{ . }}" {{ end -}} />
+      width="{{ .Get "width" | default $img.Width }}" height="{{ .Get "height" | default $img.Height }}" />
-    <!-- Closing img tag -->
+    {{- else }}
+    {{- partial "image.html" (dict "path" (.Get "src") "alt" (or (.Get "alt") (.Get "caption" | markdownify | plainify) | default " ") "width" (.Get "width") "height" (.Get "height")) }}
+    {{- end }}
     {{- if .Get "link" }}</a>{{ end -}}
   {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
   <figcaption>

themes/maik-blog/layouts/shortcodes/image.html

@@ -1,5 +1,3 @@
- {{ if .Get "src" }}
+{{- if .Get "src" }}
- <img src="{{ .Get "src" | safeURL }}" {{ with .Get "alt" }} alt="{{ . | plainify }}" {{ end }}
+{{- partial "image.html" (dict "path" (.Get "src") "alt" (.Get "alt" | plainify | default " ") "style" (.Get "style" | safeCSS | default " ") )}}
-     class="{{ with .Get "position"}}{{ . }}{{ else -}} left {{- end }}" {{ with .Get "style" }}
+{{- end }}
-     style="{{ . | safeCSS }}" {{ end }} />
- {{ end }}

themes/maik-blog/layouts/writeups/list.html

@@ -45,16 +45,7 @@
 
                 {{- if .Params.Cover }}
                 <figure class="post-cover">
-                    {{- $img := imageConfig (printf "static/%s" .Params.Cover) }}
+                    {{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify)) }}
-
-                    {{- if .Params.UseRelativeCover }}
-                    <img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}"
-                        alt="{{ .Title | plainify | default " " }}" width="{{ $img.Width }}"
-                        height="{{ $img.Height }}" />
-                    {{- else }}
-                    <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title | plainify | default " " }}"
-                        width="{{ $img.Width }}" height="{{ $img.Height }}" />
-                    {{- end }}
 
                     {{- if .Params.CoverCaption }}
                     <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>

themes/maik-blog/layouts/writeups/single.html

@@ -38,9 +38,7 @@
     {{- end }}
 
     {{- if .Params.Cover }}
-    {{ $img := imageConfig (printf "static/%s" .Params.Cover) }}
+    {{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify | default " ") "class" "post-cover") }}
-    <img src="/{{ .Params.Cover }}" class="post-cover" alt="{{ .Title | plainify | default " " }}"
-      width="{{ $img.Width }}" height="{{ $img.Height }}" />
     {{- end }}
 
     <div class="post-content">