From 9cbf096db52ef4164ad9abd3e3182e19a0e85276 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Wed, 2 Oct 2019 21:17:24 +0100
Subject: [PATCH] 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
---
 exampleSite/content/home/demo.md  |  3 +++
 layouts/partials/widget_page.html | 10 +++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/exampleSite/content/home/demo.md b/exampleSite/content/home/demo.md
index f36c0ff1..8b3c6acd 100644
--- a/exampleSite/content/home/demo.md
+++ b/exampleSite/content/home/demo.md
@@ -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
diff --git a/layouts/partials/widget_page.html b/layouts/partials/widget_page.html
index 809967fe..6379a56a 100644
--- a/layouts/partials/widget_page.html
+++ b/layouts/partials/widget_page.html
@@ -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}}