new

layouts/partials/preloader.html

@@ -0,0 +1,38 @@
+{{ if site.Params.preloader.enable }}
+<div class="preloader">
+
+  <!-- get image path -->
+  {{ $preloaderPath:= site.Params.preloader.preloader }}
+  {{ if $preloaderPath }}
+
+  <!-- check image existence -->
+  {{ if fileExists (add `assets/` $preloaderPath) }}
+  {{ $preloader:= resources.Get $preloaderPath }}
+
+  <!-- image extension -->
+  {{ $preloader_ext := path.Ext $preloader }}
+  <!-- image width -->
+  {{ $preloader_width := $preloader.Width }}
+
+  <!-- not gif -->
+  {{ if ne $preloader_ext ".gif" }}
+  <!-- webp image -->
+  {{ $option_webp := add (add (string $preloader_width) "x") " webp" }}
+  {{ .Scratch.Set "preloader" ($preloader.Resize $option_webp).RelPermalink }}
+  <!-- fallback image -->
+  {{ $option := add (string $preloader_width) "x" }}
+  {{ .Scratch.Set "preloader_fallback" ($preloader.Resize $option).RelPermalink }}
+
+  <!-- gif image -->
+  {{ else }}
+  {{ .Scratch.Set "preloader" $preloader.RelPermalink }}
+  {{ end }}
+
+  <img class="img-fluid" loading="preload" decoding="async" src="{{.Scratch.Get `preloader`}}" aria-label="preloader" title="preloader"
+    onerror="this.onerror=null;this.src='{{.Scratch.Get `preloader_fallback`}}'" alt="preloader">
+  {{ end }}
+  {{ end }}
+  <!-- /check image existence -->
+
+</div>
+{{ end }}