added multiple options to display hero images

layouts/_default/single.html

@@ -1,7 +1,14 @@
 {{ define "main" }}
 <article>
-  {{ partial "hero.html" . }}
-  <header class="mt-5 max-w-prose">
+  {{ if .Params.showHero | default (.Site.Params.article.showHero | default false) }}
+  {{ $heroStyle := print "partials/hero/" .Site.Params.article.heroStyle ".html" }}
+    {{ if templates.Exists $heroStyle }}
+      {{ partial $heroStyle . }}
+    {{ else }}
+      {{ partial "partials/hero/basic.html" . }}
+    {{ end }}
+  {{- end -}}
+  <header id="single_header" class="mt-5 max-w-prose">
     {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
     {{ partial "breadcrumbs.html" . }}
     {{ end }}
@@ -136,6 +143,15 @@
             remove_like_article(id_likes)
           }
         }
+
+        var header = document.getElementById("single_header")
+        var style = getComputedStyle(header);
+        console.log(style, style.height)
+        var margin = '-'+ (parseInt(style.height) + parseInt(style.marginTop) + parseInt(style.marginBottom) + 20) + 'px'
+        console.log(margin)
+        var hero = document.getElementById('hero')
+        if(hero)
+          hero.style["margin-bottom"] = margin;
       </script>
   </section>
   <footer class="pt-8 max-w-prose print:hidden">

layouts/partials/hero.html

@@ -1,10 +0,0 @@
-{{ if .Params.showHero | default (.Site.Params.article.showHero | default false) }}
-{{- $images := .Resources.ByType "image" -}}
-{{- $featured := $images.GetMatch "*feature*" -}}
-{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
-{{- with $featured -}}
-{{ with .Resize "600x" }}
-<div class="w-full h-36 md:h-56 lg:h-72 single_hero nozoom" style="background-image:url({{ .RelPermalink }});"></div>
-{{ end }}
-{{- end -}}
-{{- end -}}

layouts/partials/hero/background.html

@@ -0,0 +1,10 @@
+{{- $images := .Resources.ByType "image" -}}
+{{- $featured := $images.GetMatch "*feature*" -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+{{- with $featured -}}
+    {{ with .Resize "1200x" }}
+        <div id="hero" class="relative h-[45vh] single_hero_background nozoom" style="background-image:url({{ .RelPermalink }});">
+            <div class="hero_gradient bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
+        </div>
+    {{ end }}
+{{- end -}}

layouts/partials/hero/basic.html

@@ -0,0 +1,8 @@
+{{- $images := .Resources.ByType "image" -}}
+{{- $featured := $images.GetMatch "*feature*" -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+{{- with $featured -}}
+    {{ with .Resize "1200x" }}
+        <div class="w-full h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
+    {{ end }}
+{{- end -}}

layouts/partials/hero/big.html

@@ -0,0 +1,8 @@
+{{- $images := .Resources.ByType "image" -}}
+{{- $featured := $images.GetMatch "*feature*" -}}
+{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
+{{- with $featured -}}
+    {{ with .Resize "1200x" }}
+        <img class="w-full rounded-lg single_hero_round nozoom" src="{{ .RelPermalink }}">
+    {{ end }}
+{{- end -}}