From c0ba0dd298dda8977a9ca5af32b707a0477b0e85 Mon Sep 17 00:00:00 2001
From: Cyrill Raccaud <miaucl@users.noreply.github.com>
Date: Sat, 12 Oct 2024 14:30:44 +0200
Subject: [PATCH] allow also to control the fitting of the image

- cover remains the default, but with breakpoints one gains flexibility an can add rules for different devices
---
 exampleSite/config.toml           | 4 ++--
 layouts/partials/page-header.html | 2 +-
 layouts/partials/site-header.html | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index b7e9a74..492e0fd 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -34,8 +34,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 alignment style for the featured image from "bg-top|bg-center|bg-bottom", or add any other class space-separated to customize further
-featured_image_class = "bg-top"
+# 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
 
 [[params.ananke_socials]]
diff --git a/layouts/partials/page-header.html b/layouts/partials/page-header.html
index fa11f40..51eb0e1 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 {{ .Params.featured_image_class | .Site.Params.featured_image_class | default "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 bb57630..7a121fb 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 {{ .Site.Params.featured_image_class | default "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">