Browse Source

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
George Cushen 5 năm trước cách đây
mục cha
commit
9cbf096db5
2 tập tin đã thay đổi với 12 bổ sung1 xóa
  1. 3 0
      exampleSite/content/home/demo.md
  2. 9 1
      layouts/partials/widget_page.html

+ 3 - 0
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

+ 9 - 1
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}}