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:
George Cushen committed 2019-10-02 21:17:24 +01:00
1 parent 3911b8ff53
commit 9cbf096db5
2 files changed
+12 -1

No files matched your search

+3
View File
@@ -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
+9 -1
View File
@@ -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}}