diff options
| author | Paul Wellner Bou <paul@wellnerbou.de> | 2021-11-08 13:49:52 +0300 |
|---|---|---|
| committer | Paul Wellner Bou <paul@wellnerbou.de> | 2021-11-08 13:49:52 +0300 |
| commit | 079d2cd8005171fb0128b5eb06e5ccd9419f4611 (patch) | |
| tree | 3532683e03ad3e38bd85e6f9b90249779cbf6a19 | |
| parent | 26dcc1cdce0208094b154ae8b348e85e2247fe4f (diff) | |
Implement possibility to add a site header image
| -rw-r--r-- | README.md | 26 | ||||
| -rw-r--r-- | layouts/partials/article.html | 4 | ||||
| -rw-r--r-- | layouts/partials/header.html | 5 | ||||
| -rw-r--r-- | layouts/partials/site_logo.html | 7 | ||||
| -rw-r--r-- | static/css/styles-dark.css | 11 | ||||
| -rw-r--r-- | static/css/styles-light.css | 11 |
6 files changed, 57 insertions, 7 deletions
@@ -154,6 +154,32 @@ To link to tags use the url `/tags/` (e.g. `https://example.com/tags/`) and `/ca ### Images +#### Site header + +A side header can be added in `config.toml`. + +``` +site_logo = "/link/to/image" +``` + +It is possible to use full width image as well, using either `/link/to/image#full` (which will affect only this image and +not the featured images for posts which may override the site header image) or `site_logo_classes = "full-image"` in `config.toml` (which +will affect all header images, even if a featured image of a post overrides the site logo). + +#### Featured images for posts + +A featured image for a post which will be shown in list overviews and at the top of the post page can be added in the frontmatter. + +``` +images: ["/link/to/image"] +``` + +Here, too, it is possible to display the image in full width appending `#full` or `#float` to the URL (see below). + +Featured images can override the site logo on the post page, using `replace_site_logo: false` in the frontmatter. + +#### Images in text + Kiera supports adding image as `img` tag with standard Markdown: `` diff --git a/layouts/partials/article.html b/layouts/partials/article.html index 12f3903..e451eee 100644 --- a/layouts/partials/article.html +++ b/layouts/partials/article.html @@ -6,7 +6,9 @@ {{ partial "aside" . }} {{ end }} - {{ partial "featured_image" . }} + {{ if not (.Params.replace_site_logo) }} + {{ partial "featured_image" . }} + {{ end }} {{ .Content }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 8ebb21d..6ccdbb9 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -11,9 +11,10 @@ <body> <div id="container"> <header> + {{ partial "site_logo" . }} <h1> - <a href="{{ relLangURL "/" }}">{{ .Site.Title | markdownify }}</a> - </h1> + <a href="{{ relLangURL "/" }}">{{ .Site.Title | markdownify }}</a> + </h1> <ul id="social-media"> {{- range .Site.Languages -}} diff --git a/layouts/partials/site_logo.html b/layouts/partials/site_logo.html new file mode 100644 index 0000000..504f700 --- /dev/null +++ b/layouts/partials/site_logo.html @@ -0,0 +1,7 @@ +{{ if or (.Site.Params.site_logo) (.Params.replace_site_logo) }} +<div class="site_logo featured_image"> + <a href="{{ relLangURL "/" }}"> + <img class="{{ .Site.Params.site_logo_classes }}" src="{{ if .Params.replace_site_logo }}{{ index .Params.images 0 }}{{ else }}{{ .Site.Params.site_logo }}{{ end }}"> + </a> +</div> +{{ end }}
\ No newline at end of file diff --git a/static/css/styles-dark.css b/static/css/styles-dark.css index d6ddebb..829db62 100644 --- a/static/css/styles-dark.css +++ b/static/css/styles-dark.css @@ -277,13 +277,20 @@ a { box-shadow: 0 3px 3px #bbbbbb; } -.full-image, figure.full img, img[src*="full"] { +/** +:not(#home) and :not(#list) is avoiding full width image in list of posts, e.g. home and taxonomy pages + */ +header .full-image, header figure.full img, header img[src*="full"], +article .full-image, article figure.full img, article img[src*="full"], +section:not(#list):not(#home) .full-image, section:not(#list):not(#home) figure.full img, section:not(#list):not(#home) img[src*="full"] { width: 100%; box-shadow: 0 3px 3px #bbbbbb; } @supports (width: 100vw) { - .full-image, figure.full img, img[src*="full"] { + header .full-image, header figure.full img, header img[src*="full"], + article .full-image, article figure.full img, article img[src*="full"], + section:not(#list):not(#home) .full-image, section:not(#list):not(#home) figure.full img, section:not(#list):not(#home) img[src*="full"] { width: 100vw; position: relative; left: 50%; diff --git a/static/css/styles-light.css b/static/css/styles-light.css index 9bb16df..bc9350e 100644 --- a/static/css/styles-light.css +++ b/static/css/styles-light.css @@ -276,13 +276,20 @@ a { box-shadow: 0 3px 3px #bbbbbb; } -.full-image, figure.full img, img[src*="full"] { +/** +:not(#home) and :not(#list) is avoiding full width image in list of posts, e.g. home and taxonomy pages + */ +header .full-image, header figure.full img, header img[src*="full"], +article .full-image, article figure.full img, article img[src*="full"], +section:not(#list):not(#home) .full-image, section:not(#list):not(#home) figure.full img, section:not(#list):not(#home) img[src*="full"] { width: 100%; box-shadow: 0 3px 3px #bbbbbb; } @supports (width: 100vw) { - .full-image, figure.full img, img[src*="full"] { + header .full-image, header figure.full img, header img[src*="full"], + article .full-image, article figure.full img, article img[src*="full"], + section:not(#list):not(#home) .full-image, section:not(#list):not(#home) figure.full img, section:not(#list):not(#home) img[src*="full"] { width: 100vw; position: relative; left: 50%; |