Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

shortcode 'blocks/cover': improvements #1400

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

shortcode 'blocks/cover': improvements #1400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
65 changes: 40 additions & 25 deletions layouts/shortcodes/blocks/cover.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
{{ $_hugo_config := `{ "version": 1 }` -}}
{{ $blockID := printf "td-cover-block-%d" .Ordinal -}}
{{ $promo_image := (.Page.Resources.ByType "image").GetMatch "**background*" -}}
{{ $logo_image := (.Page.Resources.ByType "image").GetMatch "**logo*" -}}
{{ $col_id := .Get "color" | default "dark" -}}
{{ $image_anchor := .Get "image_anchor" | default "smart" -}}
{{ $logo_anchor := .Get "logo_anchor" | default "smart" -}}
{{/* Height can be one of: auto, min, med, max, full. */ -}}
{{ $height := .Get "height" | default "max" -}}

{{ $height := "max" -}}
{{/* Check: height must be one of: auto, min, med, max, full. */ -}}
{{ with .Get "height" -}}
{{ if not ( or ( eq . "auto" ) ( eq . "min" ) ( eq . "med" ) ( eq . "max" ) ( eq . "full" ) ) -}}
{{ errorf "shortcode 'blocks/cover': parameter height is '%s', must be one of 'auto', 'min', 'med', 'max' or 'full'." . -}}
{{ else -}}
{{ $height = . -}}
{{ end -}}
{{ end -}}
{{ with $promo_image -}}
{{ $promo_image_big := (.Fill (printf "1920x1080 %s" $image_anchor)) -}}
{{ $promo_image_small := (.Fill (printf "960x540 %s" $image_anchor)) -}}
Expand All @@ -25,26 +30,36 @@
</style>
{{ end -}}

<section id="{{ $blockID }}" class="row td-cover-block td-cover-block--height-{{ $height -}}
{{ if not .Site.Params.ui.navbar_translucent_over_cover_disable }} js-td-cover
{{- end }} td-overlay td-overlay--dark -bg-{{ $col_id }}">
<div class="col-12">
<div class="container td-overlay__inner">
<div class="text-center">
{{ with .Get "title" }}<h1 class="display-1 mt-0 mt-md-5 pb-4">{{ $title := . }}{{ with $logo_image }}{{ $logo_image_resized := (.Fit (printf "70x70 %s" $logo_anchor)) }}<img class="td-cover-logo" src="{{ $logo_image_resized.RelPermalink }}" alt="{{ $title | html }} Logo">{{ end }}{{ $title | html }}</h1>{{ end }}
{{ with .Get "subtitle" }}<p class="display-2 text-uppercase mb-0">{{ . | html }}</p>{{ end }}
<div class="pt-3 lead">
{{ if eq .Page.File.Ext "md" }}
{{ .Inner | markdownify }}
{{ else }}
{{ .Inner | htmlUnescape | safeHTML }}
{{ end }}
</div>
</div>
</div>
</div>
{{ with .Get "byline" | default "" -}}
<div class="byline">{{ . }}</div>
{{- end }}
<section id="{{ $blockID }}" class="row td-cover-block td-cover-block--height-{{ $height -}}{{ if not .Site.Params.ui.navbar_translucent_over_cover_disable }} js-td-cover {{- end }} td-overlay td-overlay--dark -bg-{{ $col_id }}">
<div class="col-12">
<div class="container td-overlay__inner">
<div class="text-center">
{{ with .Get "title" -}}
{{ $title := . -}}
<h1 class="display-1 mt-0 mt-md-5 pb-4">{{ with $logo_image }}{{ $logo_image_resized := (.Fit (printf "70x70 %s" $logo_anchor)) }}<img class="td-cover-logo" src="{{- $logo_image_resized.RelPermalink -}}" alt="{{- $title }} Logo">
{{ end }}
{{/* Do **not** remove this comment! It ends above html block! See https://spec.commonmark.org/0.30/#html-blocks, 7. */}}
{{ . -}}</h1>
{{ end -}}
{{ with .Get "subtitle" -}}
<div class="display-2 text-uppercase mb-0">
{{/* Do **not** remove this comment! It ends above html block! See https://spec.commonmark.org/0.30/#html-blocks, 7. */}}
{{ . -}}</div>
{{ end -}}
<div class="pt-3 lead">
{{/* Do **not** remove this comment! It ends above html block! See https://spec.commonmark.org/0.30/#html-blocks, 7. */}}
{{ .Inner -}}
</div>
</div>
</div>
</div>
{{ with .Get "byline" -}}
<div class="byline">
<small>
{{/* Do **not** remove this comment! It ends above html block! See https://spec.commonmark.org/0.30/#html-blocks, 7. */}}
{{ . -}}
</small>
</div>
{{ end }}
</section>
{{/**/ -}}
23 changes: 12 additions & 11 deletions userguide/content/en/docs/adding-content/shortcodes/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ color

The **blocks/cover** shortcode creates a landing page type of block that fills the top of the page.

```html
{{</* blocks/cover title="Welcome!" image_anchor="center" height="full" color="primary" */>}}
```go-html-template
{{</* blocks/cover title="Welcome!" subtitle="Explore our site!" byline="Image attribution" image_anchor="center" height="full" color="primary" */>}}
<div class="mx-auto">
<a class="btn btn-lg btn-primary me-3 mb-4" href="{{</* relref "/docs" */>}}">
Learn More <i class="fa-solid fa-circle-right ms-2"></i>
Expand All @@ -53,18 +53,19 @@ The **blocks/cover** shortcode creates a landing page type of block that fills t
{{</* /blocks/cover */>}}
```

Note that the relevant shortcode parameters above will have sensible defaults, but is included here for completeness.
Note that the relevant shortcode parameters will have sensible defaults, but are included above for completeness.

| Parameter | Default | Description |
| ---------------- |------------| ------------|
| title | | The main display title for the block. |
| image_anchor | |
| height | | See above.
| color | | See above.
| byline | Byline text on featured image. |
| Parameter | Default | Description |
| ------------ |----------- | ------------------------------------- |
| title | n/a | The main display title for the block. |
| subtitle | n/a | The subtitle for the block. |
| image_anchor | `smart` | Crop box placement for images, see also [`anchor`](https://gohugo.io/content-management/image-processing/#anchor) | |
| height | `max` | [See above](#shortcode-blocks). |
| color | .Ordinal | [See above](#shortcode-blocks). |
| byline | n/a | Byline text on featured image. |


To set the background image, place an image with the word "background" in the name in the page's [Page Bundle](/docs/adding-content/content/#page-bundles). For example, in our the example site the background image in the home page's cover block is [`featured-background.jpg`](https://github.com/google/docsy-example/tree/main/content/en), in the same directory.
To set the background image, place an image with the word `background` as part of the file name in the page's [Page Bundle](/docs/adding-content/content/#page-bundles). For example, in our the example site the background image in the home page's cover block is [`featured-background.jpg`](https://github.com/google/docsy-example/tree/master/content/en), in the same directory.

{{% alert title="Tip" %}}
If you also include the word **featured** in the image name, e.g. `my-featured-background.jpg`, it will also be used as the Twitter Card image when shared.
Expand Down