backgrounds and feature images support svg

assets/img/background.svg

@@ -0,0 +1 @@
+<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(5) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><path d='M0-10C-.011-4.49-4.485.03-10 .03-4.485.03-.011 4.49 0 10 .011 4.498 4.493.001 10-.01 4.493-.02.012-4.498 0-10zm0 20c-.011 5.51-4.485 10.03-10 10.03 5.515 0 9.989 4.46 10 9.97.011-5.502 4.493-9.999 10-10.01C4.493 19.98.012 15.502 0 10zm20-20C19.989-4.49 15.515.03 10 .03c5.515 0 9.989 4.46 10 9.97.011-5.502 4.493-9.999 10-10.01-5.507-.01-9.988-4.488-10-9.99zm0 20c-.011 5.51-4.485 10.03-10 10.03 5.515 0 9.989 4.46 10 9.97.011-5.502 4.493-9.999 10-10.01-5.507-.01-9.988-4.488-10-9.99z'  stroke-width='1' stroke='hsla(258.5,59.4%,59.4%,1)' fill='none'/><path d='M10 0C9.989 5.51 5.515 10.03 0 10.03c5.515 0 9.989 4.46 10 9.97.011-5.502 4.493-9.998 10-10.01-5.507-.01-9.988-4.488-10-9.99z'  stroke-width='1' stroke='hsla(339.6,82.2%,51.6%,1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(#a)'/></svg>

exampleSite/config/_default/params.toml

@@ -18,7 +18,7 @@ mainSections = ["docs"]
 disableImageOptimization = false
 disableTextInHeader = false
 
-defaultBackgroundImage = "/img/ocean.jpg"
+defaultBackgroundImage = "/img/gradient.svg"
 defaultFeaturedImage = "/img/ocean.jpg"
 
 highlightCurrentMenuArea = true

layouts/partials/article-link/card-related.html

@@ -19,7 +19,7 @@
       {{ end }}
       {{- if not $featured }}{{ with .Site.Params.defaultFeaturedImage }}{{ $featured = resources.Get . }}{{ end }}{{ end -}}
       {{- with $featured -}}
-      {{ if $disableImageOptimization }}
+      {{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
         {{ with . }}
         <div class="w-full thumbnail_card_related nozoom" style="background-image:url({{ .RelPermalink }});"></div>
         {{ end }}

layouts/partials/article-link/card.html

@@ -20,7 +20,7 @@
       {{- if not $featured }}{{ with .Site.Params.defaultFeaturedImage }}{{ $featured = resources.Get . }}{{ end }}{{ end -}}
       {{ if .Params.hideFeatureImage }}{{ $featured = false }}{{ end }}
       {{- with $featured -}}
-      {{ if $disableImageOptimization }}
+      {{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
         {{ with . }}
         <div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
         {{ end }}

layouts/partials/article-link/simple.html

@@ -47,7 +47,7 @@
     {{- if not $featured }}{{ with .Site.Params.defaultFeaturedImage }}{{ $featured = resources.Get . }}{{ end }}{{ end -}}
     {{ if .Params.hideFeatureImage }}{{ $featured = false }}{{ end }}
     {{- with $featured -}}
-    {{ if $disableImageOptimization }}
+    {{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
         {{ with . }}
         <div class="{{ $articleImageClasses }}" style="background-image:url({{ .RelPermalink }});"></div>
         {{ end }}

layouts/partials/hero/background.html

@@ -30,10 +30,12 @@
         (and ($.Site.Params.list.layoutBackgroundHeaderSpace | default true) ($isParentList))
     ) }}
 {{- with $featured -}}
+
 {{ if $shouldAddHeaderSpace | default true}}
 <div id="hero" class="h-[150px] md:h-[200px]"></div>
 {{ end }}
-{{ if $disableImageOptimization }}
+
+{{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
     {{ with . }}
     <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
     style="background-image:url({{ .RelPermalink }});">

layouts/partials/hero/basic.html

@@ -1,14 +1,27 @@
 {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
 
 {{- $images := .Resources.ByType "image" -}}
-{{- $featured := $images.GetMatch "*feature*" -}}
+{{- $featured := $images.GetMatch "*background*" -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "*feature*" }}{{ end -}}
 {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
-{{ if .Params.featureimage }}
+
+{{ if and .Params.featureimage (not $featured) }}
 {{- $url:= .Params.featureimage -}}
-{{- if not $featured }}{{ $featured = resources.GetRemote $url }}{{ end -}}
+{{ $featured = resources.GetRemote $url }}
 {{ end }}
+
+{{- if not $featured }}
+ {{ with .Site.Params.defaultBackgroundImage }}
+  {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
+   {{ $featured = resources.GetRemote . }}
+  {{ else }}
+   {{ $featured = resources.Get . }}
+  {{ end }}
+ {{ end }}
+{{ end -}}
+
 {{- with $featured -}}
-    {{ if $disableImageOptimization }}
+    {{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
         {{ with . }}
             <div class="w-full h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
         {{ end }}

layouts/partials/hero/big.html

@@ -1,18 +1,44 @@
 {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
 
 {{- $images := .Resources.ByType "image" -}}
-{{- $featured := $images.GetMatch "*feature*" -}}
+{{- $featured := $images.GetMatch "*background*" -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "*feature*" }}{{ end -}}
 {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
-{{ $caption := "" }}
+
 {{ if .Params.featureimage }}
 {{- $url:= .Params.featureimage -}}
-{{- $caption = .Params.featureimagecaption -}}
 {{- if not $featured }}{{ $featured = resources.GetRemote $url }}{{ end -}}
 {{ end }}
+
+{{- if not $featured }}
+ {{ with .Site.Params.defaultBackgroundImage }}
+  {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
+   {{ $featured = resources.GetRemote . }}
+  {{ else }}
+   {{ $featured = resources.Get . }}
+  {{ end }}
+ {{ end }}
+{{ end -}}
+
+{{ $caption := "" }}
+{{ if .Params.featureimagecaption }}
+{{- $caption = .Params.featureimagecaption -}}
+{{ end }}
+
 {{- $alt := .Page.Title -}}
 {{- with .Page.Params.alt }}{{ $alt = . }}{{ end -}}
+
 {{- with $featured -}}
-    {{ if $disableImageOptimization }}
+    {{ if strings.HasSuffix $featured ".svg" }}
+        {{ with . }}
+        <figure>
+            <img class="w-full rounded-lg single_hero_round nozoom" alt="{{ $alt }}" src="{{ .RelPermalink }}">
+            {{ if $caption }}
+                <figcaption class="text-sm text-neutral-700 dark:text-neutral-400 hover:underline" style="text-align: center;"> {{ $caption | markdownify }} </figcaption>
+            {{end}}
+        </figure>
+        {{ end }}
+    {{ else if $disableImageOptimization }}
         {{ with . }}
         <figure>
             <img class="w-full rounded-lg single_hero_round nozoom" alt="{{ $alt }}" width="{{ .Width }}" height="{{ .Height }}" src="{{ .RelPermalink }}">

layouts/partials/hero/thumbAndBackground.html

@@ -20,7 +20,7 @@
     ) }}
 
 {{- with $featured -}}
-{{ if $disableImageOptimization }}
+{{ if or $disableImageOptimization (strings.HasSuffix . ".svg")}}
 {{ with . }}
 <div class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
 {{ end }}
@@ -33,7 +33,7 @@
 
 {{- with $background -}}
 
-{{ if $disableImageOptimization }}
+{{ if or $disableImageOptimization (strings.HasSuffix . ".svg")}}
 {{ with . }}
 <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
     style="background-image:url({{ .RelPermalink }});">