mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-12 20:15:25 +00:00
feat: add bg size, position, and parallax options to Widget Pages
# Options are `cover` (default), `contain`, or `actual` size. image_size = "actual" # Options include `left`, `center` (default), or `right`. image_position = "right" # Use a fun parallax-like fixed background effect? true/false image_parallax = true See #1377
This commit is contained in:
1 parent
3911b8ff53
commit
9cbf096db5
2 files changed
+12
-1
No files matched your search
@@ -31,6 +31,9 @@ subtitle = ""
|
||||
# Background image.
|
||||
image = "headers/bubbles-wide.jpg" # Name of image in `static/img/`.
|
||||
image_darken = 0.6 # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
|
||||
image_size = "cover" # Options are `cover` (default), `contain`, or `actual` size.
|
||||
image_position = "center" # Options include `left`, `center` (default), or `right`.
|
||||
image_parallax = true # Use a fun parallax-like fixed background effect? true/false
|
||||
|
||||
# Text color (true=light or false=dark).
|
||||
text_color_light = true
|
||||
|
||||
@@ -35,6 +35,14 @@
|
||||
{{ end }}
|
||||
{{/* See Hugo note on linking assets in styles: https://github.com/gohugoio/hugoThemes#common-permalink-issues */}}
|
||||
{{ $style = printf "%sbackground-image: %s url('%s');" $style $darken (printf "img/%s" $bg.image | absURL) }}
|
||||
{{ with $bg.image_size }}
|
||||
{{/* Allow sizes: actual, cover, and contain. */}}
|
||||
{{ $style = printf "%sbackground-size: %s;" $style (replace . "actual" "auto") }}
|
||||
{{ end }}
|
||||
{{ with $bg.image_position }}
|
||||
{{/* Allow valid CSS positions including left, center, and right. */}}
|
||||
{{ $style = printf "%sbackground-position: %s;" $style . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ with $st.Params.design.spacing.padding }}
|
||||
@@ -66,7 +74,7 @@
|
||||
{{ $use_container = false }}
|
||||
{{ end }}
|
||||
|
||||
<section id="{{$hash_id}}" class="home-section {{printf "wg-%s" (replace $widget "_" "-")}} {{if $bg.text_color_light}}dark{{end}} {{if $bg.image}}parallax{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}} {{print $extra_attributes | safeHTMLAttr}}>
|
||||
<section id="{{$hash_id}}" class="home-section {{printf "wg-%s" (replace $widget "_" "-")}} {{if $bg.text_color_light}}dark{{end}} {{if $bg.image}} bg-image{{if ($bg.image_parallax | default true) }} parallax{{end}}{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}} {{print $extra_attributes | safeHTMLAttr}}>
|
||||
{{if $use_container}}<div class="container">{{end}}
|
||||
{{ partial $widget_path $widget_args }}
|
||||
{{if $use_container}}</div>{{end}}
|
||||
|
||||
Reference in new issue
Block a user