Add image enlargement

themes/maik-blog/assets/js/image_enlargement.js

@@ -0,0 +1,20 @@
+window.addEventListener("load", () => {
+  document.querySelectorAll("figure.enlargable").forEach(node => {
+    node.addEventListener("click", () => {
+      console.log("Hey");
+      node.classList.toggle("enlarged")
+    })
+  })
+
+  const keyDown = (e) => {
+    if (e.keyCode !== 27) {
+      return
+    }
+
+    document.querySelectorAll("figure.enlarged").forEach(node => {
+      node.classList.remove("enlarged")
+    })
+  }
+
+  document.addEventListener('keydown', keyDown)
+})

themes/maik-blog/assets/scss/_main.scss

@@ -209,6 +209,73 @@ figure {
   &.inline {
     display: inline-table;
   }
+
+  &.enlargable {
+    cursor: pointer;
+  }
+
+  .enlarged_image {
+    display: none;
+  }
+
+  &.enlarged .enlarged_image {
+    cursor: initial;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    left: 0;
+    top: 0;
+    min-width: 100vw;
+    max-width: 100vw;
+    width: 100vw;
+    min-height: 100vh;
+    max-height: 100vh;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    z-index: 10000;
+    background: #2c2c2cdd;
+
+    &::after {
+      content: "×";
+      display: block;
+      height: 2rem;
+      width: 2rem;
+      line-height: 2rem;
+      text-align: center;
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      color: $dark-color;
+      font-size: 3rem;
+      cursor: pointer;
+    }
+
+    picture {
+      max-width: 80%;
+      width: 80%;
+      height: 80%;
+      object-fit: contain;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+
+    .caption {
+      background: #c2c2c2;
+      padding: 1rem 2rem;
+      border-radius: 8px;
+    }
+  }
 }
 
 code {

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

@@ -1,5 +1,34 @@
-{{- $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 }}" {{end}} />
+{{- $orignal := resources.Get .path }}
+{{- $png := $orignal.Resize (printf "%dx%d png q50" $orignal.Width $orignal.Height) }}
+{{- $webp := $orignal.Resize (printf "%dx%d webp q50" $orignal.Width $orignal.Height) }}
+{{- $pngFull := $orignal.Resize (printf "%dx%d webp q100" $orignal.Width $orignal.Height) }}
+{{- $webpFull := $orignal.Resize (printf "%dx%d webp q100" $orignal.Width $orignal.Height) }}
+<picture>
+  <source type="image/webp" srcset="{{ $webp.Permalink }}">
+  <img
+    src="{{ $png.Permalink }}"
+    alt="{{ .alt | default "" }}"
+    title="{{ .alt }}"
+    width="{{ .width | default $png.Width }}"
+    height="{{ .height | default $png.Height }}"
+    {{- if .class}}class="{{ .class }}" {{end}}
+    {{- if .style}}style="{{ .style | safeCSS }}" {{end}} />
+</picture>
+
+<div class="enlarged_image">
+  <picture>
+    <source type="image/webp" srcset="{{ $webpFull.Permalink }}">
+    <img
+      src="{{ $pngFull.Permalink }}"
+      alt="{{ .alt | default "" }}"
+      loading="lazy"
+      title="{{ .alt }}"
+      width="{{ .width | default $pngFull.Width }}"
+      height="{{ .height | default $pngFull.Height }}"
+      {{- if .class}}class="{{ .class }}" {{end}}
+      {{- if .style}}style="{{ .style | safeCSS }}" {{end}} />
+  </picture>
+  {{- with .alt }}
+  <p class="caption">{{ . }}</p>
+  {{- end }}
+</div>

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

@@ -2,7 +2,8 @@
 {{- $menu := resources.Get "js/menu.js" }}
 {{- $theme := resources.Get "js/theme.js" }}
 {{- $nav := resources.Get "js/nav.js" }}
-{{- $secureJS := slice $main $menu $theme $nav | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
+{{- $image_enlargement := resources.Get "js/image_enlargement.js" }}
+{{- $secureJS := slice $main $menu $theme $nav $image_enlargement | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
 <script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
 
 {{- if .Site.GoogleAnalytics }}

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

@@ -1,4 +1,4 @@
-<figure{{ with .Get "class" }} class="{{ . }}" {{ end }}{{ with .Get "id" }} id="{{ . }}" {{ end }}>
+<figure class="enlargable {{- with .Get "class" }} {{ . }}{{ end }}" {{ with .Get "id" }} id="{{ . }}" {{ end }}>
   {{- if .Get "link" -}}
   <a href="{{ .Get "link" }}" {{ with .Get "target" }} target="{{ . }}" {{ end }}{{ with .Get "rel" }} rel="{{ . }}"
     {{ end }}>
@@ -9,7 +9,7 @@
       alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}" {{- end -}}
       width="{{ .Get "width" | default $img.Width }}" height="{{ .Get "height" | default $img.Height }}" />
     {{- else }}
-    {{- partial "image.html" (dict "path" (.Get "src") "alt" (or (.Get "alt") (.Get "caption" | markdownify | plainify)) "width" (.Get "width") "height" (.Get "height")) }}
+    {{- partial "image.html" (dict "path" (.Get "src") "alt" (or (.Get "alt") (or (.Get "caption" | markdownify | plainify) (.Get "title"))) "width" (.Get "width") "height" (.Get "height")) }}
     {{- end }}
     {{- if .Get "link" }}</a>{{ end -}}
   {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
@@ -33,4 +33,4 @@
     {{- end -}}
   </figcaption>
   {{- end }}
-  </figure>
+</figure>