Merge pull request #279 from nunocoracao/245-split-background-from-hero

Background heros improvements
This commit is contained in:
Nuno Coração 2022-12-02 22:33:23 +00:00 committed by GitHub
commit 4271c40f5a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 190 additions and 134 deletions

View file

@ -43,8 +43,8 @@ enableCodeCopy = true
showDateUpdated = false
showAuthor = true
showHero = true
heroStyle = "basic" # valid options: basic, big, background
layoutBackgroundBlur = false # only used when heroStyle equals background
heroStyle = "basic" # valid options: basic, big, background, thumbAndBackground
layoutBackgroundBlur = false # only used when heroStyle equals background or thumbAndBackground
layoutBackgroundHeaderSpace = true # only used when heroStyle equals background
showBreadcrumbs = true
showDraftLabel = true
@ -65,7 +65,8 @@ enableCodeCopy = true
[list]
#showHero = true
#heroStyle = "background" # valid options: basic, big, background
#heroStyle = "background" # valid options: basic, big, background, thumbAndBackground
#layoutBackgroundBlur = true # only used when heroStyle equals background or thumbAndBackground
#layoutBackgroundHeaderSpace = true # only used when heroStyle equals background
showBreadcrumbs = false
showSummary = false

View file

@ -43,7 +43,7 @@ mainSections = ["docs"]
showDateUpdated = false
showAuthor = true
showHero = true
heroStyle = "background" # valid options: basic, big, background
heroStyle = "background" # valid options: basic, big, background, thumbAndBackground
layoutBackgroundBlur = true # only used when heroStyle equals background
showBreadcrumbs = true
showDraftLabel = true
@ -64,7 +64,8 @@ mainSections = ["docs"]
[list]
showHero = true
heroStyle = "background" # valid options: basic, big, background
heroStyle = "background" # valid options: basic, big, background, thumbAndBackground
layoutBackgroundBlur = true # only used when heroStyle equals background
layoutBackgroundHeaderSpace = false
showBreadcrumbs = false
showSummary = false

View file

@ -125,7 +125,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
<!-- prettier-ignore-start -->
| Name | Default | Description |
| ----------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `colorScheme` | `"blowfish"` | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details. |
| `defaultAppearance` | `"light"` | The default theme appearance, either `light` or `dark`. |
| `autoSwitchAppearance` | `true` | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`. |
@ -159,8 +159,8 @@ Many of the article defaults here can be overridden on a per article basis by sp
| `article.showDateUpdated` | `false` | Whether or not the dates articles were updated are displayed. |
| `article.showAuthor` | `true` | Whether or not the author box is displayed in the article footer. |
| `article.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each article page. |
| `article.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`. |
| `article.layoutBackgroundBlur` | `false` | Makes the background image in the background article heroStyle blur with the scroll |
| `article.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
| `article.layoutBackgroundBlur` | `true` | Makes the background image in the background article heroStyle blur with the scroll |
| `article.layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. |
| `article.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the article header. |
| `article.showDraftLabel` | `true` | Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`. |
@ -179,8 +179,9 @@ Many of the article defaults here can be overridden on a per article basis by sp
| `article.showComments` | `false` | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer. |
| `article.sharingLinks` | _Not set_ | Which sharing links to display at the end of each article. When not provided, or set to `false` no links will be displayed. |
| `list.showHero` | `false` | Whether the thumbnail image will be shown as a hero image within each list page. |
| `list.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`. |
| `list.heroStyle` | _Not set_ | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
| `list.showBreadcrumbs` | `false` | Whether or not breadcrumbs are displayed in the header on list pages. |
| `list.layoutBackgroundBlur` | `true` | Makes the background image in the background list heroStyle blur with the scroll |
| `list.layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. |
| `list.showTableOfContents` | `false` | Whether or not the table of contents is displayed on list pages. |
| `list.showSummary` | `false` | Whether or not article summaries are displayed on list pages. If a summary is not provided in the [front matter]({{< ref "front-matter" >}}), one will be auto generated using the `summaryLength` parameter in the [site configuration](#site-configuration). |

View file

@ -14,41 +14,42 @@ In addition to the [default Hugo front matter parameters](https://gohugo.io/cont
Front matter parameter default values are inherited from the theme's [base configuration]({{< ref "configuration" >}}), so you only need to specify these parameters in your front matter when you want to override the default.
<!-- prettier-ignore-start -->
|Name|Default|Description|
|---|---|---|
|`title`|_Not set_|The name of the article.|
|`description`|_Not set_|The text description for the article. It is used in the HTML metadata.|
|`externalUrl`|_Not set_|If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website.|
|`editURL`|`article.editURL`|When `showEdit` is active, the URL for the edit link.|
|`editAppendPath`|`article.editAppendPath`|When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`.|
|`groupByYear`|`list.groupByYear`|Whether or not articles are grouped by year on list pages.|
|`menu`|_Not set_|When a value is provided, a link to this article will appear in the named menus. Valid values are `main` or `footer`.|
|`robots`|_Not set_|String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.|
|`sharingLinks`|`article.sharingLinks`|Which sharing links to display at the end of this article. When not provided, or set to `false` no links will be displayed.|
|`showAuthor`|`article.showAuthor`|Whether or not the author box for the deafult author is displayed in the article footer.|
|`authors`|_Not set_|Array of values for authors, if set it overrides `showAuthor` settings for page or site. Used on the multiple authors feature, check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature.|
|`showAuthorsBadges`|`article.showAuthorsBadges`|Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature.|
|`showHero`|`article.showHero`|Whether the thumbnail image will be shown as a hero image within the article page.|
|`heroStyle`|`article.heroStyle`|Style to display the hero image, valid options are: `basic`, `big`, `background`.|
|`showBreadcrumbs`|`article.showBreadcrumbs` or `list.showBreadcrumbs`|Whether the breadcrumbs are displayed in the article or list header.|
|`showDate`|`article.showDate`|Whether or not the article date is displayed. The date is set using the `date` parameter.|
|`showDateUpdated`|`article.showDateUpdated`|Whether or not the date the article was updated is displayed. The date is set using the `lastmod` parameter.|
|`showEdit`|`article.showEdit`|Whether or not the link to edit the article content should be displayed.|
|`showHeadingAnchors`|`article.showHeadingAnchors`|Whether or not heading anchor links are displayed alongside headings within this article.|
|`showPagination`|`article.showPagination`|Whether or not the next/previous article links are displayed in the article footer.|
|`invertPagination`|`article.invertPagination`|Whether or not to flip the direction of the next/previous article links.|
|`showReadingTime`|`article.showReadingTime`|Whether or not the article reading time is displayed.|
|`showTaxonomies`|`article.showTaxonomies`|Whether or not the taxonomies that relate to this article are displayed.|
|`showTableOfContents`|`article.showTableOfContents`|Whether or not the table of contents is displayed on this article.|
|`showWordCount`|`article.showWordCount`|Whether or not the article word count is displayed.|
|`showComments`|`article.showComments`|Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer.|
|`showSummary`|`list.showSummary`|Whether or not the article summary should be displayed on list pages.|
|`showViews`|`article.showViews`|Whether or not the article views should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish|
|`showLikes`|`article.showLikes`|Whether or not the article likes should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish|
|`seriesOpened`|`article.seriesOpened`|Whether or not the series module will be displayed open by default or not.|
|`series`|_Not set_|Array of series the article belongs to, we recommend using only one series per article.|
|`series_order`|_Not set_|Number of the article within the series.|
|`summary`|Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}}))|When `showSummary` is enabled, this is the Markdown string to be used as the summary for this article.|
|`xml`|`true` unless excluded by `sitemap.excludedKinds`|Whether or not this article is included in the generated `/sitemap.xml` file.|
|`layoutBackgroundHeaderSpace`|`true`|Add space between the header and the body.|
| Name | Default | Description |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `title` | _Not set_ | The name of the article. |
| `description` | _Not set_ | The text description for the article. It is used in the HTML metadata. |
| `externalUrl` | _Not set_ | If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website. |
| `editURL` | `article.editURL` | When `showEdit` is active, the URL for the edit link. |
| `editAppendPath` | `article.editAppendPath` | When `showEdit` is active, whether or not the path to the current article should be appended to the URL set at `editURL`. |
| `groupByYear` | `list.groupByYear` | Whether or not articles are grouped by year on list pages. |
| `menu` | _Not set_ | When a value is provided, a link to this article will appear in the named menus. Valid values are `main` or `footer`. |
| `robots` | _Not set_ | String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values. |
| `sharingLinks` | `article.sharingLinks` | Which sharing links to display at the end of this article. When not provided, or set to `false` no links will be displayed. |
| `showAuthor` | `article.showAuthor` | Whether or not the author box for the deafult author is displayed in the article footer. |
| `authors` | _Not set_ | Array of values for authors, if set it overrides `showAuthor` settings for page or site. Used on the multiple authors feature, check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
| `showAuthorsBadges` | `article.showAuthorsBadges` | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
| `showHero` | `article.showHero` | Whether the thumbnail image will be shown as a hero image within the article page. |
| `heroStyle` | `article.heroStyle` | Style to display the hero image, valid options are: `basic`, `big`, `background`. |
| `showBreadcrumbs` | `article.showBreadcrumbs` or `list.showBreadcrumbs` | Whether the breadcrumbs are displayed in the article or list header. |
| `showDate` | `article.showDate` | Whether or not the article date is displayed. The date is set using the `date` parameter. |
| `showDateUpdated` | `article.showDateUpdated` | Whether or not the date the article was updated is displayed. The date is set using the `lastmod` parameter. |
| `showEdit` | `article.showEdit` | Whether or not the link to edit the article content should be displayed. |
| `showHeadingAnchors` | `article.showHeadingAnchors` | Whether or not heading anchor links are displayed alongside headings within this article. |
| `showPagination` | `article.showPagination` | Whether or not the next/previous article links are displayed in the article footer. |
| `invertPagination` | `article.invertPagination` | Whether or not to flip the direction of the next/previous article links. |
| `showReadingTime` | `article.showReadingTime` | Whether or not the article reading time is displayed. |
| `showTaxonomies` | `article.showTaxonomies` | Whether or not the taxonomies that relate to this article are displayed. |
| `showTableOfContents` | `article.showTableOfContents` | Whether or not the table of contents is displayed on this article. |
| `showWordCount` | `article.showWordCount` | Whether or not the article word count is displayed. |
| `showComments` | `article.showComments` | Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer. |
| `showSummary` | `list.showSummary` | Whether or not the article summary should be displayed on list pages. |
| `showViews` | `article.showViews` | Whether or not the article views should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish |
| `showLikes` | `article.showLikes` | Whether or not the article likes should be displayed in lists and detailed view. This requires a firebase integration. Check [this page]({{< ref "firebase-views" >}}) for a guide on how to integrate Firebase into Blowfish |
| `seriesOpened` | `article.seriesOpened` | Whether or not the series module will be displayed open by default or not. |
| `series` | _Not set_ | Array of series the article belongs to, we recommend using only one series per article. |
| `series_order` | _Not set_ | Number of the article within the series. |
| `summary` | Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}})) | When `showSummary` is enabled, this is the Markdown string to be used as the summary for this article. |
| `xml` | `true` unless excluded by `sitemap.excludedKinds` | Whether or not this article is included in the generated `/sitemap.xml` file. |
| `layoutBackgroundBlur` | `true` | Makes the background image in the background heroStyle blur with the scroll |
| `layoutBackgroundHeaderSpace` | `true` | Add space between the header and the body. |
<!-- prettier-ignore-end -->

View file

@ -195,12 +195,14 @@ Menu links will be sorted from lowest to highest `weight`, and then alphabetical
Both menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide.
## Thumbnails
## Thumbnails & Backgrounds
Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms.
[Here]({{< ref "thumbnails" >}}) is also a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see how you can do it.
Additionally, Blowfish also supports background hero images in articles and lists. In order to use a different image than the featured one, add an image file in which the name starts with `background*`.
## Detailed configuration
The steps above are the bare minimum configuration. If you now run `hugo server` you will be presented with a blank Blowfish website. Detailed configuration is covered in the [Configuration]({{< ref "configuration" >}}) section.

View file

@ -1,5 +1,5 @@
---
title: "Welcome to Blowfish 🐡"
title: "Welcome to Blowfish"
date: 2022-01-19
draft: false
description: "Discover what's new in Blowfish version 2.0."

View file

@ -1,8 +1,13 @@
{{- $images := .Resources.ByType "image" -}}
{{- $featured := $images.GetMatch "*feature*" -}}
{{- $featured := $images.GetMatch "*background*" -}}
{{- if not $featured }}{{ $featured = $images.GetMatch "*feature*" }}{{ end -}}
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
{{- if not $featured }}{{ with .Site.Params.defaultBackgroundImage }}{{ $featured = resources.Get . }}{{ end }}{{ end -}}
{{ $isParentList := eq (.Scratch.Get "scope") "list" }}
{{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or
(and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList))
(and ($.Site.Params.list.layoutBackgroundBlur | default true) ($isParentList))
) }}
{{ $shouldAddHeaderSpace := $.Params.layoutBackgroundHeaderSpace | default (or
(and ($.Site.Params.article.layoutBackgroundHeaderSpace | default true) (not $isParentList))
(and ($.Site.Params.list.layoutBackgroundHeaderSpace | default true) ($isParentList))
@ -20,7 +25,7 @@
class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal">
</div>
</div>
{{ if $.Site.Params.article.layoutBackgroundBlur | default false }}
{{ if $shouldBlur | default false }}
<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
<script>
window.addEventListener('scroll', function (e) {

View file

@ -0,0 +1,45 @@
{{- $images := .Resources.ByType "image" -}}
{{- $background := $images.GetMatch "*background*" -}}
{{- if not $background }}{{ with .Site.Params.defaultBackgroundImage }}{{ $background = resources.Get . }}{{ end }}{{ end -}}
{{- if not $background }}{{ $background = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
{{- if not $background }}{{ $background = $images.GetMatch "*feature*" }}{{ end -}}
{{- $featured := $images.GetMatch "*feature*" -}}
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
{{- if not $featured }}{{ $featured = $images.GetMatch "*background*" }}{{ end -}}
{{- if not $featured }}{{ with .Site.Params.defaultBackgroundImage }}{{ $featured = resources.Get . }}{{ end }}{{ end -}}
{{ $isParentList := eq (.Scratch.Get "scope") "list" }}
{{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or
(and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList))
(and ($.Site.Params.list.layoutBackgroundBlur | default true) ($isParentList))
) }}
{{- with $featured -}}
{{ with .Resize "1200x" }}
<div class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
{{ end }}
{{- end -}}
{{- with $background -}}
{{ with .Resize "1200x" }}
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
style="background-image:url({{ .RelPermalink }});">
<div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
</div>
<div
class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal">
</div>
</div>
{{ end }}
{{- end -}}
{{ if $shouldBlur | default false }}
<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
<script>
window.addEventListener('scroll', function (e) {
var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var background_blur = document.getElementById('background-blur');
background_blur.style.opacity = (scroll / 300)
});
</script>
{{ end }}

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "hugo-blowfish-theme",
"version": "2.14.1",
"version": "2.15.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "hugo-blowfish-theme",
"version": "2.14.1",
"version": "2.15.0",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {