9fc4b73a36
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
26 lines
1 KiB
HTML
26 lines
1 KiB
HTML
{{ $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="{{ .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">
|
|
{{ if not .Params.omit_header_text }}
|
|
<div class="f2 f1-l fw2 white-90 mb0 lh-title">{{ .Title | default .Site.Title }}</div>
|
|
{{ with .Params.description }}
|
|
<div class="fw1 f5 f3-l white-80 measure-wide-l center lh-copy mt3 mb4">
|
|
{{ . }}
|
|
</div>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
{{ else }}
|
|
<header>
|
|
<div class="{{ .Site.Params.background_color_class | default "bg-black" }}">
|
|
{{ partial "site-navigation.html" . }}
|
|
</div>
|
|
</header>
|
|
{{ end }}
|