Add image shortcode for responsive images and increase Hugo build timeout

Signed-off-by: caesarsage <destinyerhabor6@gmail.com>

Author: Caesarsage

config/_default/hugo.toml

@@ -22,6 +22,9 @@ disqusShortname = "microcks-io"
 #hasCJKLanguage = true # If hasCJKLanguage true, auto-detect Chinese/Japanese/Korean Languages in the content.
 hasCJKLanguage = false
 
+# Increase Hugo build timeout to prevent aborts during heavy image processing
+timeout = "300s"
+
 ############################# Modules ############################
 [module]
 [[module.mounts]]
@@ -61,7 +64,7 @@ home = ["HTML", "RSS", "JSON", "WebAppManifest"]
 # See https://github.com/disintegration/imaging
 # Default JPEG or WebP quality setting. Default is 75.
 quality = 90
-resampleFilter = "lanczos"
+resampleFilter = "Lanczos"
 
 ############################# Caches ###############################
 [caches]

layouts/shortcodes/image.html

@@ -0,0 +1,27 @@
+{{- $src := .Get "src" -}} {{- $alt := .Get "alt" | default "" -}} {{- $width :=
+.Get "width" -}} {{- $height := .Get "height" -}} {{- $sizes := .Get "sizes" |
+default "(max-width: 800px) 100vw, 800px" -}} {{- /* For real responsive images,
+you would generate resized versions. Here, we use the same src for all for
+simplicity. */ -}} {{- $srcset := printf "%s 400w, %s 800w, %s 1200w" $src $src
+$src -}}
+<img
+  src="{{ $src }}"
+  alt="{{ $alt }}"
+  {{
+  with
+  $width
+  }}width="{{ . }}"
+  {{
+  end
+  }}
+  {{
+  with
+  $height
+  }}height="{{ . }}"
+  {{
+  end
+  }}
+  srcset="{{ $srcset }}"
+  sizes="{{ $sizes }}"
+  loading="lazy"
+/>