Merge pull request #121 from nunocoracao/120-improve-ui-options-for-hero-image

added multiple options to display hero images

assets/css/compiled/main.css

@@ -1510,18 +1510,14 @@ select {
   margin-top: 1.25rem;
 }
 
-.mt-2\.5 {
+.mt-1 {
-  margin-top: 0.625rem;
+  margin-top: 0.25rem;
 }
 
 .mb-6 {
   margin-bottom: 1.5rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -1594,10 +1590,6 @@ select {
   margin-bottom: 0px;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .mb-\[2px\] {
   margin-bottom: 2px;
 }
@@ -1638,14 +1630,18 @@ select {
   height: 6rem;
 }
 
-.h-36 {
-  height: 9rem;
-}
-
 .h-8 {
   height: 2rem;
 }
 
+.h-\[45vh\] {
+  height: 45vh;
+}
+
+.h-36 {
+  height: 9rem;
+}
+
 .h-48 {
   height: 12rem;
 }
@@ -1955,6 +1951,10 @@ select {
   background-color: rgba(var(--color-neutral-100), 0.5);
 }
 
+.bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
 .bg-gradient-to-b {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
@@ -1963,12 +1963,22 @@ select {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
+.from-neutral {
+  --tw-gradient-from: rgba(var(--color-neutral), 1);
+  --tw-gradient-to: rgba(var(--color-neutral), 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .from-primary-500 {
   --tw-gradient-from: rgba(var(--color-primary-500), 1);
   --tw-gradient-to: rgba(var(--color-primary-500), 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.to-transparent {
+  --tw-gradient-to: transparent;
+}
+
 .to-secondary-700 {
   --tw-gradient-to: rgba(var(--color-secondary-700), 1);
 }
@@ -2281,6 +2291,10 @@ select {
   opacity: 0;
 }
 
+.mix-blend-normal {
+  mix-blend-mode: normal;
+}
+
 .mix-blend-multiply {
   mix-blend-mode: multiply;
 }
@@ -2992,12 +3006,32 @@ body:has(#menu-controller:checked) {
   background-position:center;
 }
 
-.single_hero {
+.single_hero_basic {
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center;
 }
 
+.single_hero_round {
+  max-height: 50vh;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.single_hero_background {
+  background-repeat:no-repeat;
+  background-size:cover;
+  background-position:center;
+  width: calc(100% + 40px);
+  z-index: -10;
+  margin-left: -20px;
+}
+
+.hero_gradient {
+  width: 100%;
+  height: 100%;
+}
+
 .thumbnailshadow {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
@@ -3352,6 +3386,12 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-800), var(--tw-bg-opacity));
 }
 
+.dark .dark\:from-neutral-800 {
+  --tw-gradient-from: rgba(var(--color-neutral-800), 1);
+  --tw-gradient-to: rgba(var(--color-neutral-800), 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .dark .dark\:from-primary-600 {
   --tw-gradient-from: rgba(var(--color-primary-600), 1);
   --tw-gradient-to: rgba(var(--color-primary-600), 0);

assets/css/main.css

@@ -347,12 +347,31 @@ body:has(#menu-controller:checked) {
   background-position:center;
 }
 
-.single_hero {
+.single_hero_basic {
   background-repeat:no-repeat;
   background-size:cover; 
   background-position:center;
 }
 
+.single_hero_round {
+  max-height: 50vh;
+  object-fit: cover;
+}
+
+.single_hero_background {
+  background-repeat:no-repeat;
+  background-size:cover; 
+  background-position:center;
+  width: calc(100% + 40px);
+  z-index: -10;
+  margin-left: -20px;
+}
+
+.hero_gradient {
+  width: 100%;
+  height: 100%;
+}
+
 .thumbnailshadow {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }

config/_default/params.toml

@@ -36,6 +36,7 @@ enableCodeCopy = true
   showDateUpdated = false
   showAuthor = true
   showHero = true
+  heroStyle = "basic" # valid options: basic, big, background
   showBreadcrumbs = true
   showDraftLabel = true
   showEdit = true

exampleSite/config/_default/params.toml

@@ -36,6 +36,7 @@ mainSections = ["docs"]
   showDateUpdated = false
   showAuthor = true
   showHero = true
+  heroStyle = "background" # valid options: basic, big, background
   showBreadcrumbs = true
   showDraftLabel = true
   showEdit = true

exampleSite/content/docs/configuration/index.md

@@ -146,6 +146,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 |`article.showDateUpdated`|`false`|Whether or not the dates articles were updated are displayed.|
 |`article.showAuthor`|`true`|Whether or not the author box is displayed in the article footer.|
 |`article.showHero`|`true`|Whether the thumbnail image will be shown as a hero image within each article page.|
+|`heroStyle`|`basic`|Style to display the hero image, valid options are: `basic`, `big`, `background`.|
 |`article.showBreadcrumbs`|`false`|Whether or not breadcrumbs are displayed in the article header.|
 |`article.showDraftLabel`|`true`|Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`.|
 |`article.showEdit`|`false`|Whether or not the link to edit the article content should be displayed.|

exampleSite/content/docs/front-matter/index.md

@@ -27,6 +27,7 @@ Front matter parameter default values are inherited from the theme's [base confi
 |`authors`|_Not set_|Array of values for authors, if set it overrides `showAuthor` settings for page or site. Used on the multiple authors feature, check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature.|
 |`showAuthorsBadges`|`article.showAuthorsBadges`|Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature.|
 |`showHero`|`article.showHero`|Whether the thumbnail image will be shown as a hero image within the article page.|
+|`heroStyle`|`article.heroStyle`|Style to display the hero image, valid options are: `basic`, `big`, `background`.|
 |`showBreadcrumbs`|`article.showBreadcrumbs` or `list.showBreadcrumbs`|Whether the breadcrumbs are displayed in the article or list header.|
 |`showDate`|`article.showDate`|Whether or not the article date is displayed. The date is set using the `date` parameter.|
 |`showDateUpdated`|`article.showDateUpdated`|Whether or not the date the article was updated is displayed. The date is set using the `lastmod` parameter.|

layouts/_default/single.html

@@ -1,7 +1,14 @@
 {{ define "main" }}
 <article>
-  {{ partial "hero.html" . }}
+  {{ if .Params.showHero | default (.Site.Params.article.showHero | default false) }}
-  <header class="mt-5 max-w-prose">
+  {{ $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 -}}