{{ 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 }}