From 9fc4b73a36721caeea48455b2c089dd476a00ecf Mon Sep 17 00:00:00 2001
From: Cyrill Raccaud <miaucl@users.noreply.github.com>
Date: Mon, 21 Oct 2024 09:57:39 +0200
Subject: [PATCH] theme(fix): header image positioning (#731)

Currently, the header image for a post is `bg-top`, but it would be nice
the control this behavior to lets say `top|center|bottom`, as often the
interesting part of an image is in the center. Using the
`featured_image_class` param, one can now customize the class to control
the alignment of the featured header image. It is also possible to add
additional classes for further customization if needed.


Default case:

<img width="1512" alt="Bildschirmfoto 2024-10-12 um 14 23 10"
src="https://github.com/user-attachments/assets/477bafd2-e50a-44bf-93df-2289cb8380b2">

Same as default case but set explicitly `featured_image_class = cover
bg-top`:

<img width="1512" alt="Bildschirmfoto 2024-10-12 um 14 23 10"
src="https://github.com/user-attachments/assets/477bafd2-e50a-44bf-93df-2289cb8380b2">

`featured_image_class = cover bg-center`:

<img width="1512" alt="Bildschirmfoto 2024-10-12 um 14 23 27"
src="https://github.com/user-attachments/assets/7bae039d-d31b-405b-b5c0-0dc9e13a4f8c">

`featured_image_class = cover bg-bottom`:

<img width="1512" alt="Bildschirmfoto 2024-10-12 um 14 23 36"
src="https://github.com/user-attachments/assets/52dc14cd-2a30-4763-ae90-353d10fb34e7">

`featured_image_class = contain bg-top`:

<img width="1512" alt="Bildschirmfoto 2024-10-12 um 14 29 16"
src="https://github.com/user-attachments/assets/1ee6f371-f2b4-4740-924d-9ea6c1a44df8">

**Code formatting**

<!-- See the simple style guide. -->

**Closing issues**

Closes #729
---
 README.md                         | 4 ++++
 exampleSite/config.toml           | 2 ++
 layouts/partials/page-header.html | 2 +-
 layouts/partials/site-header.html | 2 +-
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 15a4fa9b8..7c4e038b1 100644
--- a/README.md
+++ b/README.md
@@ -122,6 +122,10 @@ You don't need an image though. The default background color is black, but you c
 
 example: `background_color_class = "bg-blue"` or `background_color_class = "bg-gray"`
 
+The default fitting and alignment for th featured image is `cover bg-top`, but can be changed using the `featured_image_class`.  Choose an fitting and alignment style for the featured image using tachyons classes such as "cover|contain" for fitting and "bg-top|bg-center|bg-bottom" for alignment.
+
+example: `featured_image_class = "cover bg-center"` or `featured_image_class = "contain bg-top"`
+
 ### Activate the contact form
 
 This theme includes a shortcode for a contact form that you can add to any page (there is an example on the contact page in the exampleSite folder). One option is to use [formspree.io](//formspree.io/) as proxy to send the actual email. Each month, visitors can send you up to one thousand emails without incurring extra charges. Visit the Formspree site to get the "action" link and add it to your shortcode like this:
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index f167ad7a6..53a2299db 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -36,6 +36,8 @@ site_logo = ""
 description = "The last theme you'll ever need. Maybe."
 # choose a background color from any on this page: https://tachyons.io/docs/themes/skins/ and preface it with "bg-"
 background_color_class = "bg-black"
+# choose an fitting and alignment style for the featured image using tachyons classes such as "cover|contain" for fitting and "bg-top|bg-center|bg-bottom" for alignment, or add any other class space-separated to customize further
+featured_image_class = "cover bg-top"
 recent_posts_number = 3
 
 [ananke.social.follow]
diff --git a/layouts/partials/page-header.html b/layouts/partials/page-header.html
index 3891c4598..51eb0e1ac 100644
--- a/layouts/partials/page-header.html
+++ b/layouts/partials/page-header.html
@@ -1,7 +1,7 @@
 {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
 {{ if $featured_image }}
   {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
-  <header class="cover bg-top" style="background-image: url('{{ $featured_image }}');">
+  <header class="{{ .Params.featured_image_class | .Site.Params.featured_image_class | default "cover bg-top" }}" style="background-image: url('{{ $featured_image }}');">
     <div class="bg-black-60">
       {{ partial "site-navigation.html" . }}
       <div class="tc-l pv6 ph3 ph4-ns">
diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html
index 1a0b3cb2e..7a121fb3e 100644
--- a/layouts/partials/site-header.html
+++ b/layouts/partials/site-header.html
@@ -1,7 +1,7 @@
 {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
 {{ if $featured_image }}
   {{/* Trimming the slash and adding absURL make sure the image works no matter where our site lives */}}
-  <header class="cover bg-top" style="background-image: url('{{ $featured_image }}');">
+  <header class="{{ .Site.Params.featured_image_class | default "cover bg-top" }}" style="background-image: url('{{ $featured_image }}');">
     <div class="{{ .Site.Params.cover_dimming_class | default "bg-black-60" }}">
       {{ partial "site-navigation.html" .}}
       <div class="tc-l pv4 pv6-l ph3 ph4-ns">