mirror of https://github.com/theNewDynamic/gohugo-theme-ananke.git

Cyrill Raccaud
21.57.2024 9fc4b73a36721caeea48455b2c089dd476a00ecf
refs
author Cyrill Raccaud <miaucl@users.noreply.github.com>
Monday, October 21, 2024 09:57 +0200
committer GitHub <noreply@github.com>
Monday, October 21, 2024 09:57 +0200
commit9fc4b73a36721caeea48455b2c089dd476a00ecf
tree 14a4447ecdeca8322083bd7e657792e28d5661c3 tree | zip | gz
parent cc6da237ea3e659a19be8faaa0f365898b5b878f view | diff
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
4 files modified
10 ■■■■ changed files
README.md 4 ●●●● diff | view | raw | blame | history
exampleSite/config.toml 2 ●●●●● diff | view | raw | blame | history
layouts/partials/page-header.html 2 ●●● diff | view | raw | blame | history
layouts/partials/site-header.html 2 ●●● diff | view | raw | blame | history