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
36 lines
1.3 KiB
HTML
36 lines
1.3 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="{{ .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">
|
|
<h1 class="f2 f-subheadline-l fw2 white-90 mb0 lh-title">
|
|
{{ .Title | default .Site.Title }}
|
|
</h1>
|
|
{{ with .Params.description }}
|
|
<h2 class="fw1 f5 f3-l white-80 measure-wide-l center mt3">
|
|
{{ . }}
|
|
</h2>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
{{ else }}
|
|
<header>
|
|
<div class="pb3-m pb6-l {{ .Site.Params.background_color_class | default "bg-black" }}">
|
|
{{ partial "site-navigation.html" . }}
|
|
<div class="tc-l pv3 ph3 ph4-ns">
|
|
<h1 class="f2 f-subheadline-l fw2 light-silver mb0 lh-title">
|
|
{{ .Title | default .Site.Title }}
|
|
</h1>
|
|
{{ with .Params.description }}
|
|
<h2 class="fw1 f5 f3-l white-80 measure-wide-l center lh-copy mt3 mb4">
|
|
{{ . }}
|
|
</h2>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
{{ end }}
|