About page, most of frontpage, news

Frontpage:
- Implement initial pass of swipers, might look for something that doesn't require JS.
- Implemented transitions
- Added transitions / company logos to assets
About page:
- Basically duplicated layout from existing website
News:
- Renamed /blog -> /news, not too much in this section left to do, relatively straightforward for that

layouts/_default/about.html

@@ -0,0 +1,153 @@
+{{ define "main" }}
+  <!-- Features -->
+  {{ $tick := 0 }}
+  {{ range $i, $e:= .Params.features }}
+
+  <section class="section-sm nim-h-screen relative feature pb-2 pt-2" style="background-color: {{ .bg_color }}">
+    {{ with .transition }}
+    {{ if .start }}
+    <div
+      class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block xl:-mt-20 -mt-16 {{ .start_class }}"
+      style="height: 100px;z-index:2;mask-image: url('{{ .start }}');background-color: {{ .start_color }};"></div>
+    {{ end }}
+    {{ if .start_dark }}
+    <div
+      class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden xl:-mt-20 -mt-16 {{ .start_class }}"
+      style="height: 100px;z-index:2;mask-image: url('{{ .start_dark }}');background-color: {{ .start_dark_color }};">
+    </div>
+    {{ end }}
+    {{ end }}
+    {{ with .bg_img }}
+    {{ $res := resources.Get .img }}
+    <div class="absolute inset-0 bg-cover bg-center bg-no-repeat {{ if .parallax }} bg-fixed parallax-bg {{ end }}"
+      style="background-image: url('{{ $res.RelPermalink }}')"></div>
+    {{ end }}
+
+    <div class="container relative mx-auto" style="z-index: 2;">
+      <div class="row items-center justify-between">
+        {{ if eq .side "center" }}
+        <div class="mx-auto md:col-8 lg:col-8 {{ .content_class }}">
+          {{ if .subtitle }}
+          <h4 class="mb-4 {{ .subtitle_class }}">{{ .subtitle }}</h4>
+          {{ end }}
+          <h2 class="mb-4 {{ .title_class }}">
+            {{ .title | markdownify }}
+          </h2>
+          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <!-- grid -->
+          {{ range $i, $e := .grid }}
+          <div class="p-4 row">
+            <div class="col-1">
+              <h3 style="color: {{ .color }}">{{ add $i 1  }}</h3>
+            </div>
+            <div class="col-11">
+              <h4 class="font-bold mb-2" style="color: {{ .color }}">{{ .title }}</h4>
+              <p class="{{ .content_class }}">{{ .content | markdownify }}</p>
+            </div> 
+          </div>
+          {{ end }}
+          </div>
+          <!-- end: grid -->
+
+          <p class="mb-8 text-lg">
+            {{ .content | markdownify }}
+          </p>
+          <ul>
+            {{ range .bulletpoints }}
+            <li class="relative mb-4 pl-6">
+              <i class="fa fa-check absolute left-0 top-1.5"></i>
+              {{ . | markdownify }}
+            </li>
+            {{ end }}
+          </ul>
+          {{ with .button }}
+          {{ if .enable }}
+          <a class="btn mt-6 {{ .class }}" href="{{ .link | absURL }}">
+            {{ .label }}
+            <i class="fa fa-arrow-right pl-2"></i>
+          </a>
+          {{ end }}
+          {{ end }}
+        </div>
+        {{ else }}
+
+        {{ if eq .side "left" }}
+        {{ $tick = 0 }}
+        {{ else if eq .side "right" }}
+        {{ $tick = 1 }}
+        {{ end }}
+
+        {{ with .bg_img }}
+        {{ if .parallax }}
+        <div class="relative h-screen overflow-hidden">
+          <div class="absolute inset-0 bg-no-repeat bg-cover 
+                          bg-fixed parallax-bg" style="background-image: url('{{ .img }}');">
+          </div>
+        </div>
+        {{ end }}
+        {{ end }}
+
+        <div class="mb:md-0 md:col-5 mb-6
+        {{ if eq $tick 1 }}
+          md:order-2
+        {{ end }}">
+
+          {{ if .image }}
+          {{ $res := resources.Get .image }}
+          <img loading="lazy" decoding="async" src="{{ $res.RelPermalink }}" class="img rounded-full w-[384px] h-[384px] object-cover w-full h-auto">
+          {{ end }}
+        </div>
+        <div class="{{ if eq $tick 0 }}
+            md:order-1
+          {{ end }} md:col-7 lg:col-6">
+          {{ if .subtitle }}
+          <h4 class="mb-4 {{ .subtitle_class }}">{{ .subtitle }}</h4>
+          {{ end }}
+          <h2 class="mb-4 {{ .title_class }}">
+            {{ .title | markdownify }}
+          </h2>
+          <p class="mb-8 text-lg {{ .content_class }}">
+            {{ .content | markdownify }}
+          </p>
+          <ul>
+            {{ range .bulletpoints }}
+            <li class="relative mb-4 pl-6">
+              <i class="fa fa-check absolute left-0 top-1.5"></i>
+              {{ . | markdownify }}
+            </li>
+            {{ end }}
+          </ul>
+          {{ with .button }}
+          {{ if .enable }}
+          <a class="btn btn-primary mt-6" href="{{ .link | absURL }}">
+            {{ .label }}
+            <i class="fa fa-arrow-right pl-2"></i>
+          </a>
+          {{ end }}
+          {{ end }}
+        </div>
+        {{ if eq $tick 0 }}
+        {{ $tick = 1}}
+        {{ else }}
+        {{ $tick = 0 }}
+        {{ end }}
+
+        {{ end }}
+      </div>
+    </div>
+    {{ with .transition }}
+    {{ if .end }}
+    <div
+      class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block xl:-mb-20 -mb-16  {{ .end_class }}"
+      style="height: 100px;z-index:2;mask-image: url('{{ .end }}');background-color: {{ .end_color }};"></div>
+    {{ end }}
+    {{ if .end_dark }}
+    <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden xl:-mb-20 -mb-16 {{ .end_class }}"
+      style="height: 100px;z-index:2;mask-image: url('{{ .end_dark }}');background-color: {{ .end_dark_color }};">
+    </div>
+    {{ end }}
+    {{ end}}
+  </section>
+  {{ end }}
+  <!-- /Features -->
+{{ end }}

layouts/index.html

@@ -75,59 +75,151 @@
   {{ end }}
   <!-- /Banner -->
   <!-- Features -->
+  {{ $tick := 0 }}
   {{ range $i, $e:= .Params.features }}
-    <section class="section-sm {{ if and (modBool $i 3) (not (.center_layout)) }}bg-gradient{{ end }}">
-      <div class="container">
+
+    <section class="section-sm nim-h-screen relative pb-0" style="background-color: {{ .bg_color }}">
+      {{ with .transition }}
+      {{ if .start }}
+      <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block xl:-mt-20 -mt-16 {{ .start_class }}"
+          style="height: 100px;z-index:2;mask-image: url('{{ .start }}');background-color: {{ .start_color }};"></div>
+      {{ end }}
+      {{ if .start_dark }}
+      <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden xl:-mt-20 -mt-16 {{ .start_class }}"
+          style="height: 100px;z-index:2;mask-image: url('{{ .start_dark }}');background-color: {{ .start_dark_color }};"></div>
+      {{ end }}
+      {{ end }}
+      {{ with .bg_img }}
+        {{ $res := resources.Get .img }}
+        <div class="absolute inset-0 bg-cover bg-center bg-no-repeat {{ if .parallax }} bg-fixed parallax-bg {{ end }}"
+            style="background-image: url('{{ $res.RelPermalink }}')"></div>
+      {{ end }}
+
+      <div class="container relative mx-auto" style="z-index: 2;">
         <div class="row items-center justify-between">
           {{ if eq .side "center" }}
-            DEVON RETURN HERE:
-            TODO:
-            - USE LOCAL VARIABLE TO TRACK INDEX WHEN NOT SET LAYOUT PATTERN,
-            - USE IS_LEFT / IS_RIGHT TO SET MOD SIDE????
-          {{ end }}
-          {{ if eq .side "left" }}
-          {{ end }}
-          {{ if eq .side "right" }}
-          {{ end }}
-          {{ if not .side }}
             <div
-            class="mb:md-0 {{ if and (not (modBool $i 2)) (not (.center_layout)) }}
+            class="mx-auto md:col-8 lg:col-8 {{ .content_class }}">
+              <h2 class="mb-4 {{ .title_class }}">
+                {{ .title | markdownify }}
+              </h2>
+              {{ with .swiper }}
+                <div class="swiper swiper-slider">
+                  <div class="swiper-wrapper">
+                    {{ range .slides }}
+                      <div class="swiper-slide">
+                        <div class="col-md-12">
+                          <a href="{{ .link }}">
+                            {{ $res := resources.Get .icon }}
+                            <img src="{{ $res.RelPermalink }}" />
+                            <span>{{ .name }}</span>
+                          </a>
+                        </div>
+                      </div>
+                    {{ end }}
+                  </div>
+                  <div class="swiper-slider-pagination mt-9 flex items-center justify-center text-center"></div>
+
+                  {{ if .show_buttons }}
+                    <div class="swiper-button-next ml-16" style="{{ .button_style }}"></div>
+                    <div class="swiper-button-prev mr-16" style="{{ .button_style }}"></div>
+                  {{ end }}
+                </div>
+              {{ end }}
+              <p class="mb-8 text-lg">
+                {{ .content | markdownify }}
+              </p>
+              <ul>
+                {{ range .bulletpoints }}
+                  <li class="relative mb-4 pl-6">
+                    <i class="fa fa-check absolute left-0 top-1.5"></i>
+                    {{ . | markdownify }}
+                  </li>
+                {{ end }}
+              </ul>
+              {{ with .button }}
+                {{ if .enable }}
+                  <a class="btn mt-6 {{ .class }}" href="{{ .link | absURL }}">
+                    {{ .label }}
+                    <i class="fa fa-arrow-right pl-2"></i>
+                  </a>
+                {{ end }}
+              {{ end }}
+            </div>
+          {{ else }}
+
+            {{ if eq .side "left" }}
+              {{ $tick = 0 }}
+            {{ else if eq .side "right" }}
+              {{ $tick = 1 }}
+            {{ end }}
+
+            {{ with .bg_img }}
+              {{ if .parallax }}
+                <div class="relative h-screen overflow-hidden">
+                  <div class="absolute inset-0 bg-no-repeat bg-cover 
+                              bg-fixed parallax-bg"
+                      style="background-image: url('{{ .img }}');">
+                  </div>
+              </div>
+              {{ end }}
+            {{ end }}
+
+            <div class="mb:md-0 md:col-5 mb-6
+            {{ if eq $tick 1 }}
               md:order-2
-            {{ end }} md:col-5 mb-6">
-            {{ if .image }}
-            {{ partial "image" (dict "Src" .image "Alt" "feature image" "DisplayXL" "520x" "DisplayLG" "425x" "DisplayMD" "360x") }}
-            {{ end }}
-          </div>
-          <div
-            class="{{ if not (modBool $i 2) }}
-              md:order-1
-            {{ end }} md:col-7 lg:col-6">
-            <h2 class="mb-4">
-              {{ .title | markdownify }}
-            </h2>
-            <p class="mb-8 text-lg">
-              {{ .content | markdownify }}
-            </p>
-            <ul>
-              {{ range .bulletpoints }}
-                <li class="relative mb-4 pl-6">
-                  <i class="fa fa-check absolute left-0 top-1.5"></i>
-                  {{ . | markdownify }}
-                </li>
+            {{ end }}">
+
+              {{ if .image }}
+               {{ partial "image" (dict "Src" .image "Alt" "feature image" "DisplayXL" "520x" "DisplayLG" "425x" "DisplayMD" "360x") }}
               {{ end }}
-            </ul>
-            {{ with .button }}
-              {{ if .enable }}
-                <a class="btn btn-primary mt-6" href="{{ .link | absURL }}">
-                  {{ .label }}
-                  <i class="fa fa-arrow-right pl-2"></i>
-                </a>
+            </div>
+            <div
+              class="{{ if eq $tick 0 }}
+                md:order-1
+              {{ end }} md:col-7 lg:col-6">
+              <h2 class="mb-4">
+                {{ .title | markdownify }}
+              </h2>
+              <p class="mb-8 text-lg">
+                {{ .content | markdownify }}
+              </p>
+              <ul>
+                {{ range .bulletpoints }}
+                  <li class="relative mb-4 pl-6">
+                    <i class="fa fa-check absolute left-0 top-1.5"></i>
+                    {{ . | markdownify }}
+                  </li>
+                {{ end }}
+              </ul>
+              {{ with .button }}
+                {{ if .enable }}
+                  <a class="btn btn-primary mt-6" href="{{ .link | absURL }}">
+                    {{ .label }}
+                    <i class="fa fa-arrow-right pl-2"></i>
+                  </a>
+                {{ end }}
               {{ end }}
+            </div>
+            {{ if eq $tick 0 }}
+              {{ $tick = 1}}
+            {{ else }}
+              {{ $tick = 0 }}
             {{ end }}
-          </div>
+          
           {{ end }}
         </div>
       </div>
+      {{ with .transition }}
+      {{ if .end }}
+      <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block xl:-mb-20 -mb-16  {{ .end_class }}"
+          style="height: 100px;z-index:2;mask-image: url('{{ .end }}');background-color: {{ .end_color }};"></div>
+      {{ end }}
+      {{ if .end_dark }}
+      <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden xl:-mb-20 -mb-16 {{ .end_class }}"
+          style="height: 100px;z-index:2;mask-image: url('{{ .end_dark }}');background-color: {{ .end_dark_color }};"></div>
+      {{ end }}
+      {{ end}}
     </section>
   {{ end }}
   <!-- /Features -->
@@ -187,8 +279,7 @@
                     </div>
                   {{ end }}
                 </div>
-                <div
-                  class="testimonial-slider-pagination mt-9 flex items-center justify-center text-center"></div>
+                <div class="testimonial-slider-pagination mt-9 flex items-center justify-center text-center"></div>
               </div>
             </div>
           </div>

layouts/partials/bg_image.html

@@ -0,0 +1,93 @@
+{{ $imagePath:= string .Src }}
+{{ $image:= . }}
+{{ $size:= .Size }}
+{{ $perspective:= .Perspective | default "cover" }}
+{{ $position:= .Position | default "center center" }}
+{{ $repeat:= .Repeat | default "no-repeat" }}
+{{ $webp:= .Webp | default true }}
+{{ $context:= .Context | default . }}
+{{ $contentImage:= false }}
+{{ $assetImage:= false }}
+{{ $placeholder:= .Placeholder | default false }}
+{{ $placeholderQuality:= "40x q20" }}
+
+<!-- check content image  -->
+{{ with $context.Resources }}
+{{ if .GetMatch $imagePath }}
+{{ $contentImage = true }}
+{{ end }}
+{{ end }}
+<!-- /check content image -->
+
+<!-- check asset image -->
+{{ if fileExists (add `assets/` (string $imagePath)) }}
+{{ $assetImage = true }}
+{{ end }}
+<!-- /check asset image -->
+
+{{ if or (hasPrefix $imagePath "http") (fileExists (add `static/` (string $imagePath))) }}
+<div style="background-size: {{$size}};background-position: {{$position}};background-repeat: {{$repeat}};" {{if $placeholder}}data-src="{{ $imagePath | absURL }}"{{end}} class="{{ .Class }}"></div>
+
+<!-- check file existence -->
+{{ else if or $assetImage $contentImage }}
+
+{{ if $assetImage }}
+{{ $image = resources.Get $imagePath }}
+{{ else if $contentImage }}
+{{ $image = $context.Resources.GetMatch $imagePath }}
+{{ end }}
+
+<!-- image extension -->
+{{ $imageExt := path.Ext $image }}
+
+<!-- image height, width (if not svg) -->
+{{ if eq $imageExt `.svg` }}
+{{ .Scratch.Set "image-height" "" }}
+{{ .Scratch.Set "image-width" "" }}
+{{ else }}
+{{ .Scratch.Set "image-height" $image.Height }}
+{{ .Scratch.Set "image-width" $image.Width }}
+{{ end }}
+{{ $imageHeight:= .Scratch.Get "image-height" }}
+{{ $imageWidth:= .Scratch.Get "image-width" }}
+
+<!-- gif/svg image -->
+{{ if or (eq $imageExt `.gif`) (eq $imageExt `.svg`) }}
+
+<!-- placeholder -->
+<div class="{{ .Class }}" style="background-image: url({{ $image.RelPermalink }});background-size: {{$perspective}};background-position: {{$position}};background-repeat: {{$repeat}};"></div>
+
+{{ else }}
+
+{{ if $size }}
+
+{{ $imageWebp:= $image.Resize (add (string $size) " webp") }}
+{{ if not $webp }}
+{{ $imageWebp = $image.Resize (string $size) }}
+{{ end }}
+
+<!-- placeholder -->
+{{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
+
+<div class="{{ .Class }}" style="background-image: url({{if $placeholder}}data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}{{else}}{{ $imageWebp.RelPermalink }}{{end}});background-size: {{$perspective}};background-position: {{$position}};background-repeat: {{$repeat}};" {{if $placeholder}}data-src="{{ $imageWebp.RelPermalink }}"{{end}}></div>
+
+{{ else }} <!-- if not size -->
+
+{{ $height:= string $image.Height }}
+{{ $width:= string $image.Width }}
+{{ $defaultSize:= add (add $width "x") $height }}
+{{ $imageWebp:= $image.Resize (add $defaultSize " webp") }}
+{{ if not $webp }}
+{{ $imageWebp = $image.Resize (string $defaultSize) }}
+{{ end }}
+
+<!-- placeholder -->
+{{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
+
+<div class="{{ .Class }}" style="background-image: url({{if $placeholder}}data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}{{else}}{{ $imageWebp.RelPermalink }}{{end}}); background-size: {{$perspective}};background-position: {{$position}};background-repeat: {{$repeat}};" {{if $placeholder}}data-src="{{ $imageWebp.RelPermalink }}"{{end}}></div>
+
+{{ end }} <!-- /if size -->
+
+{{ end }} <!-- /check file existence -->
+
+{{ end }}

layouts/partials/essentials/style.html

@@ -1,18 +1,5 @@
 <!-- DNS preconnect -->
 <meta http-equiv="x-dns-prefetch-control" content="on" />
-<link rel="preconnect" href="https://use.fontawesome.com" crossorigin />
-<link rel="preconnect" href="//cdnjs.cloudflare.com" />
-<link rel="preconnect" href="//www.googletagmanager.com" />
-<link rel="preconnect" href="//www.google-analytics.com" />
-<link rel="dns-prefetch" href="https://use.fontawesome.com" />
-<link rel="dns-prefetch" href="//ajax.googleapis.com" />
-<link rel="dns-prefetch" href="//cdnjs.cloudflare.com" />
-<link rel="dns-prefetch" href="//www.googletagmanager.com" />
-<link rel="dns-prefetch" href="//www.google-analytics.com" />
-<link rel="dns-prefetch" href="//fonts.googleapis.com" />
-<link rel="dns-prefetch" href="//connect.facebook.net" />
-<link rel="dns-prefetch" href="//platform.linkedin.com" />
-<link rel="dns-prefetch" href="//platform.twitter.com" />
 
 <!-- google fonts -->
 {{ $pf:= site.Data.theme.fonts.font_family.primary }}

layouts/partials/img_url.html

@@ -0,0 +1,93 @@
+{{ $imagePath:= string .Src }}
+{{ $image:= . }}
+{{ $size:= .Size }}
+{{ $perspective:= .Perspective | default "cover" }}
+{{ $position:= .Position | default "center center" }}
+{{ $repeat:= .Repeat | default "no-repeat" }}
+{{ $webp:= .Webp | default true }}
+{{ $context:= .Context | default . }}
+{{ $contentImage:= false }}
+{{ $assetImage:= false }}
+{{ $placeholder:= .Placeholder | default false }}
+{{ $placeholderQuality:= "40x q20" }}
+
+<!-- check content image  -->
+{{ with $context.Resources }}
+{{ if .GetMatch $imagePath }}
+{{ $contentImage = true }}
+{{ end }}
+{{ end }}
+<!-- /check content image -->
+
+<!-- check asset image -->
+{{ if fileExists (add `assets/` (string $imagePath)) }}
+{{ $assetImage = true }}
+{{ end }}
+<!-- /check asset image -->
+
+{{ if or (hasPrefix $imagePath "http") (fileExists (add `static/` (string $imagePath))) }}
+{{ $imagePath | absURL }}
+
+<!-- check file existence -->
+{{ else if or $assetImage $contentImage }}
+
+{{ if $assetImage }}
+{{ $image = resources.Get $imagePath }}
+{{ else if $contentImage }}
+{{ $image = $context.Resources.GetMatch $imagePath }}
+{{ end }}
+
+<!-- image extension -->
+{{ $imageExt := path.Ext $image }}
+
+<!-- image height, width (if not svg) -->
+{{ if eq $imageExt `.svg` }}
+{{ .Scratch.Set "image-height" "" }}
+{{ .Scratch.Set "image-width" "" }}
+{{ else }}
+{{ .Scratch.Set "image-height" $image.Height }}
+{{ .Scratch.Set "image-width" $image.Width }}
+{{ end }}
+{{ $imageHeight:= .Scratch.Get "image-height" }}
+{{ $imageWidth:= .Scratch.Get "image-width" }}
+
+<!-- gif/svg image -->
+{{ if or (eq $imageExt `.gif`) (eq $imageExt `.svg`) }}
+
+<!-- placeholder -->
+{{ $image.RelPermalink }}
+
+{{ else }}
+
+{{ if $size }}
+
+{{ $imageWebp:= $image.Resize (add (string $size) " webp") }}
+{{ if not $webp }}
+{{ $imageWebp = $image.Resize (string $size) }}
+{{ end }}
+
+<!-- placeholder -->
+{{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
+
+{{if $placeholder}}data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}{{else}}{{ $imageWebp.RelPermalink }}{{end}}
+
+{{ else }} <!-- if not size -->
+
+{{ $height:= string $image.Height }}
+{{ $width:= string $image.Width }}
+{{ $defaultSize:= add (add $width "x") $height }}
+{{ $imageWebp:= $image.Resize (add $defaultSize " webp") }}
+{{ if not $webp }}
+{{ $imageWebp = $image.Resize (string $defaultSize) }}
+{{ end }}
+
+<!-- placeholder -->
+{{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
+
+{{if $placeholder}}data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}{{else}}{{ $imageWebp.RelPermalink }}{{end}}
+
+{{ end }} <!-- /if size -->
+
+{{ end }} <!-- /check file existence -->
+
+{{ end }}

layouts/partials/page-header-breadcrumbs.html

@@ -0,0 +1,9 @@
+<section>
+  <div class="container text-center">
+    <div
+      class="from-body to-theme-light dark:from-darkmode-body dark:to-darkmode-theme-light rounded-2xl bg-gradient-to-b px-8 py-14">
+      <h1>{{ T (printf "%s" (lower .Title)) | default .Title | title }}</h1>
+      {{ partial "components/breadcrumb" (dict "Context" . "Class" "mt-6") }}
+    </div>
+  </div>
+</section>

layouts/partials/page-header.html

@@ -1,9 +1,8 @@
 <section>
   <div class="container text-center">
     <div
-      class="from-body to-theme-light dark:from-darkmode-body dark:to-darkmode-theme-light rounded-2xl bg-gradient-to-b px-8 py-14">
+      class="px-8 py-14">
       <h1>{{ T (printf "%s" (lower .Title)) | default .Title | title }}</h1>
-      {{ partial "components/breadcrumb" (dict "Context" . "Class" "mt-6") }}
     </div>
   </div>
 </section>

layouts/partials/parallax_bg.html

@@ -0,0 +1,243 @@
+{{ $image:= . }}
+{{ $imagePath:= .Src }}
+{{ $class:= .Class }}
+{{ $size:= .Size }}
+{{ $alt:= .Alt }}
+{{ $displayXL:= .DisplayXL | default "1110x" }}
+{{ $displayLG:= .DisplayLG | default "700x" }}
+{{ $displayMD:= .DisplayMD | default "600x" }}
+{{ $displaySM:= .DisplaySM | default "545x" }}
+{{ $resize:= .Resize | default true }}
+{{ $loading:= .Loading | default "lazy" }}
+{{ $context:= .Context | default . }}
+{{ $contentImage:= false }}
+{{ $assetImage:= false }}
+{{ $sizeValue:= index (split $size ` `) 0 }}
+{{ $height:= index (split $sizeValue `x`) 1 }}
+{{ $width:= index (split $sizeValue `x`) 0 }}
+{{ $webp:= .Webp | default true }}
+{{ $command:= .Command | default "Resize" }}
+{{ $placeholder:= .Placeholder | default false }}
+{{ $placeholderQuality:= "40x q20" }}
+
+
+<!-- check content image  -->
+{{ with $context.Resources.GetMatch $imagePath }}
+  {{ $contentImage = true }}
+{{ end }}
+<!-- /check content image -->
+
+<!-- check asset image -->
+{{ if fileExists (add `assets/` (string $imagePath)) }}
+  {{ $assetImage = true }}
+{{ end }}
+<!-- /check asset image -->
+
+<!-- image static/CDN -->
+{{ if or (hasPrefix $imagePath "http") (fileExists (add `static/` (string $imagePath))) }}
+  <div 
+    loading="{{ .Loading }}"
+    decoding="async"
+    style="background-image: url('{{ $imagePath | absURL }}')"
+    alt="{{ .Alt }}"
+    class="{{ $class }} img"
+    height="{{ $height }}"
+    width="{{ $width }}" />
+{{ else }}
+  <!-- /image cdn -->
+
+  <!-- check file existence -->
+  {{ if or $assetImage $contentImage }}
+    {{ if $assetImage }}
+      {{ $image = resources.Get $imagePath }}
+    {{ else if $contentImage }}
+      {{ $image = $context.Resources.GetMatch $imagePath }}
+    {{ end }}
+
+
+    <!-- image extension -->
+    {{ $imageExt := path.Ext $image }}
+
+
+    <!-- image height, width (if not svg) -->
+    {{ if eq $imageExt `.svg` }}
+      {{ .Scratch.Set "image-height" "" }}
+      {{ .Scratch.Set "image-width" "" }}
+    {{ else }}
+      {{ .Scratch.Set "image-height" $image.Height }}
+      {{ .Scratch.Set "image-width" $image.Width }}
+    {{ end }}
+    {{ $imageHeight:= .Scratch.Get "image-height" }}
+    {{ $imageWidth:= .Scratch.Get "image-width" }}
+
+
+    <!-- gif/svg image -->
+    {{ if or (eq $imageExt `.gif`) (eq $imageExt `.svg`) }}
+      <div
+        style="background-image: url('{{ $image.RelPermalink }}')"
+        loading="{{ $loading }}"
+        decoding="async"
+        alt="{{ .Alt }}"
+        class="{{ $class }} img"
+        width="{{ $width }}"
+        height="{{ $height }}" />
+    {{ else }}
+      <!-- single image -->
+      {{ if $size }}
+        <!-- resize -->
+        {{ $imageFallback:= $image.Resize $size }}
+        {{ $imageWebp:= $image.Resize (add (string $size) " webp") }}
+        {{ if not $webp }}
+          {{ $imageWebp = $image.Resize (string $size) }}
+        {{ end }}
+        <!-- fit -->
+        {{ if eq $command "Fit" }}
+          {{ $imageFallback = $image.Fit $size }}
+          {{ $imageWebp = $image.Fit (add (string $size) " webp") }}
+          {{ if not $webp }}
+            {{ $imageWebp = $image.Fit (string $size) }}
+          {{ end }}
+          <!-- fill -->
+        {{ else if eq $command "Fill" }}
+          {{ $imageFallback = $image.Fill $size }}
+          {{ $imageWebp = $image.Fill (add (string $size) " webp") }}
+          {{ if not $webp }}
+            {{ $imageWebp = $image.Fill (string $size) }}
+          {{ end }}
+          <!-- crop -->
+        {{ else if eq $command "Crop" }}
+          {{ $imageFallback = $image.Crop $size }}
+          {{ $imageWebp = $image.Crop (add (string $size) " webp") }}
+          {{ if not $webp }}
+            {{ $imageWebp = $image.Crop (string $size) }}
+          {{ end }}
+        {{ end }}
+
+
+        <!-- placeholder -->
+        {{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
+
+
+        <div
+          {{ if $placeholder }}
+            style="background-image: 'data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}'"
+            data-src={{ $imageWebp.RelPermalink }}
+          {{ else }}
+            src="{{ $imageWebp.RelPermalink }}" loading="{{ $loading }}"
+            decoding="async"
+          {{ end }}
+
+          alt="{{ .Alt }}"
+          class="{{ if $placeholder }}lazy{{ end }} {{ $class }} img"
+          width="{{- with $width -}}
+            {{- . -}}
+          {{- else -}}
+            {{- $imageWebp.Width -}}
+          {{- end -}}
+          "
+          height="{{- with $height -}}
+            {{- . -}}
+          {{- else -}}
+            {{- $imageWebp.Height -}}
+          {{- end -}}
+          "
+          onerror="this.onerror='null';
+          this.src='{{ $imageFallback.RelPermalink }}';" />
+
+        <!-- if image size less then 500x and size not defined -->
+      {{ else if or (lt ($image.Width) 500) (not $resize) }}
+        {{ $size:= add (add (string $image.Width) "x") (string $image.Height) }}
+        <!-- resize -->
+        {{ $imageWebp:= $image.Resize (add (string $size) " webp") }}
+        {{ if not $webp }}
+          {{ $imageWebp = $image.Resize (string $size) }}
+        {{ end }}
+        <!-- fit -->
+        {{ if eq $command "Fit" }}
+          {{ $imageWebp = $image.Resize (add (string $size) " webp") }}
+          {{ if not $webp }}
+            {{ $imageWebp = $image.Resize (string $size) }}
+          {{ end }}
+          <!-- fill -->
+        {{ else if eq $command "Fill" }}
+          {{ $imageWebp = $image.Resize (add (string $size) " webp") }}
+          {{ if not $webp }}
+            {{ $imageWebp = $image.Resize (string $size) }}
+          {{ end }}
+          <!-- crop -->
+        {{ else if eq $command "Crop" }}
+          {{ $imageWebp = $image.Resize (add (string $size) " webp") }}
+          {{ if not $webp }}
+            {{ $imageWebp = $image.Resize (string $size) }}
+          {{ end }}
+        {{ end }}
+
+
+        <!-- placeholder -->
+        {{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
+
+
+        <div
+          {{ if $placeholder }}
+            src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
+            data-src={{ $imageWebp.RelPermalink }} alt="placeholder"
+          {{ else }}
+            src="{{ $imageWebp.RelPermalink }}" loading="{{ $loading }}"
+            decoding="async" alt="{{ .Alt }}"
+          {{ end }}
+
+          class="{{ if $placeholder }}lazy{{ end }} {{ $class }} img"
+          width="{{- with $width -}}
+            {{- . -}}
+          {{- else -}}
+            {{- $imageWebp.Width -}}
+          {{- end -}}
+          "
+          height="{{- with $height -}}
+            {{- . -}}
+          {{- else -}}
+            {{- $imageWebp.Height -}}
+          {{- end -}}
+          "
+          onerror="this.onerror='null';this.src='{{ $image.RelPermalink }}';" />
+      {{ else }}
+        <!-- /if image size less then 500x and size not defined -->
+
+        <!-- image processing for multiple device -->
+        {{ $imageFallback:= $image.Resize $displayXL }}
+        {{ $imageXL:= $image.Resize (add $displayXL " webp") }}
+        {{ $imageLG:= $image.Resize (add $displayLG " webp") }}
+        {{ $imageMD:= $image.Resize (add $displayMD " webp") }}
+        {{ $imageSM:= $image.Resize (add $displaySM " webp") }}
+        {{ if not $webp }}
+          {{ $imageXL = $image.Resize $displayXL }}
+          {{ $imageLG = $image.Resize $displayLG }}
+          {{ $imageMD = $image.Resize $displayMD }}
+          {{ $imageSM = $image.Resize $displaySM }}
+        {{ end }}
+
+
+        <!-- placeholder -->
+        {{ $placeholderImage := ($imageFallback.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
+
+
+          <div
+            {{ if $placeholder }}
+              src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
+              data-src={{ $imageFallback.RelPermalink }}
+            {{ else }}
+              loading="{{ $loading }}" decoding="async"
+              style="background: url('{{ $imageFallback.RelPermalink }}')"
+            {{ end }}class="{{ if $placeholder }}
+              lazy
+            {{ end }} {{ $class }} img"
+            alt="{{ .Alt }}" />
+      {{ end }}
+      <!-- end image processing -->
+    {{ end }}
+    <!-- end single image -->
+  {{ end }}
+
+
+  <!-- end check file existence -->
+{{ end }}