Hero images for articles

assets/css/compiled/main.css

@@ -1510,6 +1510,10 @@ select {
   margin-top: 1.25rem;
 }
 
+.mt-4 {
+  margin-top: 1rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -1530,10 +1534,6 @@ select {
   margin-top: 0.1rem;
 }
 
-.mt-4 {
-  margin-top: 1rem;
-}
-
 .\!mt-0 {
   margin-top: 0px !important;
 }
@@ -1618,6 +1618,10 @@ select {
   height: 3rem;
 }
 
+.h-36 {
+  height: 9rem;
+}
+
 .h-full {
   height: 100%;
 }
@@ -1638,10 +1642,6 @@ select {
   height: 50%;
 }
 
-.h-36 {
-  height: 9rem;
-}
-
 .max-h-\[5rem\] {
   max-height: 5rem;
 }
@@ -2982,6 +2982,12 @@ body:has(#menu-controller:checked) {
   background-position:center;
 }
 
+.single_hero {
+  background-repeat:no-repeat;
+  background-size:cover;
+  background-position:center;
+}
+
 .thumbnailshadow {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
@@ -3523,6 +3529,10 @@ body:has(#menu-controller:checked) {
     display: none;
   }
 
+  .md\:h-56 {
+    height: 14rem;
+  }
+
   .md\:w-1\/3 {
     width: 33.333333%;
   }
@@ -3601,6 +3611,10 @@ body:has(#menu-controller:checked) {
     display: none;
   }
 
+  .lg\:h-72 {
+    height: 18rem;
+  }
+
   .lg\:h-full {
     height: 100%;
   }

assets/css/main.css

@@ -347,6 +347,12 @@ body:has(#menu-controller:checked) {
   background-position:center;
 }
 
+.single_hero {
+  background-repeat:no-repeat;
+  background-size:cover; 
+  background-position:center;
+}
+
 .thumbnailshadow {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }

config/_default/params.toml

@@ -35,6 +35,7 @@ enableCodeCopy = true
   #showLikes = true
   showDateUpdated = false
   showAuthor = true
+  showHero = true
   showBreadcrumbs = true
   showDraftLabel = true
   showEdit = true

exampleSite/config/_default/params.toml

@@ -35,6 +35,7 @@ mainSections = ["docs"]
   showLikes = true
   showDateUpdated = false
   showAuthor = true
+  showHero = true
   showBreadcrumbs = true
   showDraftLabel = true
   showEdit = true

exampleSite/content/docs/configuration/index.md

@@ -145,6 +145,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 |`article.showLikes`|`false`|Whether or not article likes are displayed. This requires firebase integrations to be enabled, look below.|
 |`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.|
 |`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

@@ -26,6 +26,7 @@ Front matter parameter default values are inherited from the theme's [base confi
 |`showAuthor`|`article.showAuthor`|Whether or not the author box for the deafult author is displayed in the article footer.|
 |`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.|
 |`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.|

exampleSite/content/docs/thumbnails/index.md

@@ -37,3 +37,7 @@ content
     └── featured.png
 ```
 The you just need to add an image like explain earlier. If you want to see a sample of this you can consult [this sample]({{< ref "thumbnail_sample" >}}).
+
+## Hero Images
+
+Thumbnails will be used by default as hero images withing each article. Use the global `article.showHero` or the front-matter parameter `showHero` to control this feature across the entire site or for each specific post.

layouts/_default/single.html

@@ -1,13 +1,25 @@
 {{ define "main" }}
 <article>
-  <header class="max-w-prose">
+
+  {{ 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 -}}
+
+  <header class="mt-5 max-w-prose">
     {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
     {{ partial "breadcrumbs.html" . }}
     {{ end }}
     <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
       {{ .Title | emojify }}
     </h1>
-    <div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
+    <div class="mt-4 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
       {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
     </div>
   </header>

layouts/partials/meta/likes_button.html

@@ -1,6 +1,6 @@
 <span>
     <button id="likes_button"
-        style="height: 30px; padding-top: 2px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px"
+        style="height: 28px; padding-top: 2px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px"
         class="!rounded-md bg-primary-600 px-4 py-2 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
         onclick="process_article()">
         <span id="likes_button_heart" style="display:none">{{ partial "icon.html" "heart" }} </span>