feat: add support for imagePosition config

layouts/partials/hero/background.html

@@ -1,5 +1,6 @@
 {{ $disableImageOptimization := site.Store.Get "disableImageOptimization" }}
 
+{{ $useDefault := false }}
 {{ $featured := "" }}
 {{ $featuredURL := "" }}
 {{ with .Params.featureimage }}
@@ -25,8 +26,10 @@
   {{ $default := site.Store.Get "defaultBackgroundImage" }}
   {{ if $default.url }}
     {{ $featuredURL = $default.url }}
+    {{ $useDefault = true }}
   {{ else if $default.obj }}
     {{ $featured = $default.obj }}
+    {{ $useDefault = true }}
   {{ end }}
 {{ end }}
 
@@ -58,6 +61,11 @@
     <div id="hero" class="h-[150px] md:h-[200px]"></div>
   {{ end }}
   <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom">
+    {{ $style := "" }}
+    {{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
+    {{ with $.Params.imagePosition | default $defaultPosition }}
+      {{ $style = printf "object-position: %s;" . }}
+    {{ end }}
     <img
       id="background-image"
       src="{{ . }}"
@@ -65,7 +73,8 @@
       loading="eager"
       decoding="async"
       fetchpriority="high"
-      class="absolute inset-0 w-full h-full object-cover">
+      class="absolute inset-0 w-full h-full object-cover"
+      {{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
     <div
       class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
     <div

layouts/partials/hero/basic.html

@@ -1,5 +1,6 @@
 {{ $disableImageOptimization := site.Store.Get "disableImageOptimization" }}
 
+{{ $useDefault := false }}
 {{ $featured := "" }}
 {{ $featuredURL := "" }}
 {{ with .Params.featureimage }}
@@ -25,8 +26,10 @@
   {{ $default := site.Store.Get "defaultBackgroundImage" }}
   {{ if $default.url }}
     {{ $featuredURL = $default.url }}
+    {{ $useDefault = true }}
   {{ else if $default.obj }}
     {{ $featured = $default.obj }}
+    {{ $useDefault = true }}
   {{ end }}
 {{ end }}
 
@@ -42,6 +45,11 @@
 {{ end }}
 
 {{ with $featuredURL }}
+  {{ $style := "" }}
+  {{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
+  {{ with $.Params.imagePosition | default $defaultPosition }}
+    {{ $style = printf "object-position: %s;" . }}
+  {{ end }}
   <div class="overflow-hidden h-36 md:h-56 lg:h-72">
     <img
       src="{{ . }}"
@@ -49,6 +57,7 @@
       loading="eager"
       decoding="async"
       fetchpriority="high"
-      class="w-full h-full nozoom object-cover">
+      class="w-full h-full nozoom object-cover"
+      {{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
   </div>
 {{ end }}

layouts/partials/hero/big.html

@@ -1,5 +1,6 @@
 {{ $disableImageOptimization := site.Store.Get "disableImageOptimization" }}
 
+{{ $useDefault := false }}
 {{ $featured := "" }}
 {{ $featuredURL := "" }}
 {{ with .Params.featureimage }}
@@ -25,8 +26,10 @@
   {{ $default := site.Store.Get "defaultBackgroundImage" }}
   {{ if $default.url }}
     {{ $featuredURL = $default.url }}
+    {{ $useDefault = true }}
   {{ else if $default.obj }}
     {{ $featured = $default.obj }}
+    {{ $useDefault = true }}
   {{ end }}
 {{ end }}
 
@@ -50,6 +53,11 @@
 {{- with .Page.Params.alt }}{{ $alt = . }}{{ end -}}
 
 {{ with $featuredURL }}
+  {{ $style := "" }}
+  {{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
+  {{ with $.Params.imagePosition | default $defaultPosition }}
+    {{ $style = printf "object-position: %s;" . }}
+  {{ end }}
   <figure>
     <img
       src="{{ . }}"
@@ -57,7 +65,8 @@
       loading="eager"
       decoding="async"
       fetchpriority="high"
-      class="w-full rounded-lg single_hero_round nozoom">
+      class="w-full rounded-lg single_hero_round nozoom"
+      {{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
     {{ if $caption }}
       <figcaption class="text-sm text-neutral-700 dark:text-neutral-400 hover:underline text-center">
         {{ $caption | markdownify }}

layouts/partials/hero/thumbAndBackground.html

@@ -1,6 +1,7 @@
 {{ $disableImageOptimization := site.Store.Get "disableImageOptimization" }}
 
 {{/* === Background === */}}
+{{ $useDefault := false }}
 {{ $images := .Resources.ByType "image" }}
 {{ $background := $images.GetMatch "*background*" }}
 {{ $backgroundURL := "" }}
@@ -9,8 +10,10 @@
   {{ $default := site.Store.Get "defaultBackgroundImage" }}
   {{ if $default.url }}
     {{ $backgroundURL = $default.url }}
+    {{ $useDefault = true }}
   {{ else if $default.obj }}
     {{ $background = $default.obj }}
+    {{ $useDefault = true }}
   {{ end }}
 {{ end }}
 
@@ -88,13 +91,19 @@
       loading="eager"
       decoding="async"
       fetchpriority="high"
-      class="w-full h-full nozoom object-cover">
+      class="w-full h-full nozoom object-cover"
+      {{ with $.Params.imagePositionFeature }}style="object-position: {{ . }};"{{ end }}>
   </div>
 {{ end }}
 
 
 <div class="single_hero_background nozoom fixed inset-x-0 top-0 h-[800px]">
   {{ with $backgroundURL }}
+    {{ $style := "" }}
+    {{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
+    {{ with $.Params.imagePosition | default $defaultPosition }}
+      {{ $style = printf "object-position: %s;" . }}
+    {{ end }}
     <img
       id="background-image-main"
       src="{{ . }}"
@@ -102,7 +111,8 @@
       loading="eager"
       decoding="async"
       fetchpriority="high"
-      class="absolute inset-0 h-full w-full object-cover">
+      class="absolute inset-0 h-full w-full object-cover"
+      {{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
   {{ end }}
   <div
     class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>

layouts/partials/home/background.html

@@ -5,6 +5,7 @@
     <div class="mx-auto max-w-7xl p-0">
       <div class="relative sm:overflow-hidden">
         <div class="fixed inset-x-0 top-0 -z-10">
+          {{ $useDefault := true }}
           {{ $homepageImage := "" }}
           {{ with .Site.Params.defaultBackgroundImage }}
             {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
@@ -16,16 +17,24 @@
           {{ with .Site.Params.homepage.homepageImage }}
             {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
               {{ $homepageImage = resources.GetRemote . }}
+              {{ $useDefault = false }}
             {{ else }}
               {{ $homepageImage = resources.Get . }}
+              {{ $useDefault = false }}
             {{ end }}
           {{ end }}
           {{ if $homepageImage }}
+            {{ $style := "" }}
+            {{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
+            {{ with $.Params.imagePosition | default $defaultPosition }}
+              {{ $style = printf "object-position: %s;" . }}
+            {{ end }}
             <img
               id="background-image"
               class="nozoom mt-0 mr-0 mb-0 ml-0 h-[1000px] w-full object-cover"
               src="{{ $homepageImage.RelPermalink }}"
-              role="presentation">
+              role="presentation"
+              {{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
             <div
               class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
             <div

layouts/partials/home/card.html

@@ -14,6 +14,7 @@
       </div>
       <div class="mt-6 sm:mt-16 lg:mt-0 mx-auto max-w-xl px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
         <div class="-me-48 md:-me-16 lg:relative lg:m-0 lg:h-full lg:px-0 w-full">
+          {{ $useDefault := true }}
           {{ $homepageImage := "" }}
           {{ with .Site.Params.defaultBackgroundImage }}
             {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
@@ -25,14 +26,22 @@
           {{ with .Site.Params.homepage.homepageImage }}
             {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
               {{ $homepageImage = resources.GetRemote . }}
+              {{ $useDefault = false }}
             {{ else }}
               {{ $homepageImage = resources.Get . }}
+              {{ $useDefault = false }}
             {{ end }}
           {{ end }}
           {{ if $homepageImage }}
+            {{ $style := "" }}
+            {{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
+            {{ with $.Params.imagePosition | default $defaultPosition }}
+              {{ $style = printf "object-position: %s;" . }}
+            {{ end }}
             <img
               class="w-full rounded-xl shadow-xl lg:absolute lg:h-full lg:w-auto lg:max-w-none"
-              src="{{ $homepageImage.RelPermalink }}">
+              src="{{ $homepageImage.RelPermalink }}"
+              {{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
           {{ end }}
         </div>
       </div>

layouts/partials/home/hero.html

@@ -6,6 +6,7 @@
     <div class="mx-auto max-w-7xl p-0">
       <div class="relative shadow-xl sm:overflow-hidden rounded-2xl">
         <div class="absolute inset-0">
+          {{ $useDefault := true }}
           {{ $homepageImage := "" }}
           {{ with .Site.Params.defaultBackgroundImage }}
             {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
@@ -17,12 +18,22 @@
           {{ with .Site.Params.homepage.homepageImage }}
             {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
               {{ $homepageImage = resources.GetRemote . }}
+              {{ $useDefault = false }}
             {{ else }}
               {{ $homepageImage = resources.Get . }}
+              {{ $useDefault = false }}
             {{ end }}
           {{ end }}
           {{ if $homepageImage }}
-            <img class="h-full w-full object-cover nozoom mt-0 mr-0 mb-0 ml-0" src="{{ $homepageImage.RelPermalink }}">
+            {{ $style := "" }}
+            {{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
+            {{ with $.Params.imagePosition | default $defaultPosition }}
+              {{ $style = printf "object-position: %s;" . }}
+            {{ end }}
+            <img
+              class="h-full w-full object-cover nozoom mt-0 mr-0 mb-0 ml-0"
+              src="{{ $homepageImage.RelPermalink }}"
+              {{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
             {{ if not $disableHeroImageFilter }}
               <div
                 class="absolute inset-0 bg-gradient-to-r from-primary-500 to-secondary-600 dark:from-primary-600 dark:to-secondary-800 mix-blend-multiply"></div>