feat(widget): apply a background color, gradient, or image to any widget

Also renames Hero Carousel widget to Slider.

BREAKING CHANGES:

- widget `[header]` options removed and replaced with `[background]`
- `hero_carousel` widget renamed to `slider`

Close #948

exampleSite/content/home/hero.md

@@ -11,12 +11,24 @@ weight = 3
 # Hero image (optional). Enter filename of an image in the `static/img/` folder.
 hero_media = "hero-academic.png"
 
-# Overlay a color or image (optional).
-#   Deactivate an option by commenting out the line, prefixing it with `#`.
-[header]
-  overlay_color = "#4bb4e3"  # An HTML color value.
-  overlay_img = ""  # Image path relative to your `static/img/` folder.
-  overlay_filter = 0.5  # Darken the image. Value in range 0-1.
+# Background (optional).
+#   Choose from a background color, gradient, or image.
+#   Choose a dark or light text color, by setting `text_color_light`.
+#   Delete or comment out (by prefixing `#`) any unused options.
+[background]
+  # Background color.
+  # color = "navy"
+  
+  # Background gradient.
+  gradient_start = "#4bb4e3"
+  gradient_end = "#2b94c3"
+  
+  # Background image.
+  # image = ""  # Name of image in `static/img/`.
+  # image_darken = 0.6  # Darken the image? Range 0-1 where 0 is transparent and 1 is opaque.
+
+  # Text color (true=light or false=dark).
+  text_color_light = true
 
 # Call to action links (optional).
 #   Display link(s) by specifying a URL and label below. Icon is optional for `[cta]`.

exampleSite/content/home/hero_carousel.md → exampleSite/content/home/slider.md

@@ -1,6 +1,6 @@
 +++
-# Hero Carousel widget.
-widget = "hero_carousel"  # Do not modify this line!
+# Slider widget.
+widget = "slider"  # Do not modify this line!
 active = false  # Activate this widget? true/false
 
 # Order that this section will appear in.
@@ -52,5 +52,4 @@ height = "300px"
   overlay_color = "#333"  # An HTML color value.
   overlay_img = ""  # Image path relative to your `static/img/` folder.
   overlay_filter = 0.5  # Darken the image. Value in range 0-1.
-
 +++

exampleSite/content/home/teaching.md

@@ -12,10 +12,34 @@ subtitle = ""
 # Order that this section will appear in.
 weight = 60
 
+# Background (optional).
+#   Choose from a background color, gradient, or image.
+#   Choose a dark or light text color, by setting `text_color_light`.
+#   Delete or comment out (by prefixing `#`) any unused options.
+[background]
+  # Background color.
+  # color = "navy"
+  
+  # Background gradient.
+  # gradient_start = "DeepSkyBlue"
+  # gradient_end = "SkyBlue"
+  
+  # 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.
+
+  # Text color (true=light or false=dark).
+  text_color_light = true
 +++
 
+{{% alert note %}}
 This is an example of using the *custom* widget to create your own homepage section.
 
+This section also demonstrates how to apply the *background* option to create an *image parallax* effect. Backgrounds can be applied to any section.
+{{% /alert %}}
+
+## Example content
+
 I am a teaching instructor for the following courses at University X:
 
 - CS101: An intro to computer science

layouts/partials/css/academic.css

@@ -487,6 +487,22 @@ a[data-fancybox] img {
   animation-delay: 0.15s;
 }
 
+/* Override dark colors that may be inherited from body.dark */
+.home-section.dark,
+.home-section.dark h1,
+.home-section.dark h3 {
+  color: rgb(248, 248, 242);
+}
+
+/* Create the parallax scrolling effect */
+.parallax {
+  height: 100%;
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
 .home-section:first-of-type {
   padding-top: 50px;
 }
@@ -535,7 +551,7 @@ a[data-fancybox] img {
  *  Hero Widget
  **************************************************/
 
-.hero-overlay {
+.wg-hero {
   padding: 3em 0;
   clear: both;
   background-size: cover;
@@ -557,27 +573,27 @@ a[data-fancybox] img {
   font-size: 1.35rem;
 }
 
-.hero-overlay .hero-title,
-.hero-overlay .hero-lead,
-.hero-overlay .hero-cta-alt,
-.hero-overlay .hero-note {
+.wg-hero .hero-title,
+.wg-hero .hero-lead,
+.wg-hero .hero-cta-alt,
+.wg-hero .hero-note {
   color: #fff;
   /*text-shadow: 1px 1px 4px rgba(0,0,0,0.5);*/ /* Uncomment to standout on complicated backgrounds. */
 }
 
-.hero-overlay a:not(.hero-overlay .btn) {
+.wg-hero a:not(.wg-hero .btn) {
   color: #fff;
 }
 
-.hero-overlay .hero-lead a {
+.wg-hero .hero-lead a {
   text-decoration: underline;
 }
 
-.hero-overlay .cta-btns {
+.wg-hero .cta-btns {
   margin-bottom: 16px;
 }
 
-.hero-overlay .btn {
+.wg-hero .btn {
   color: {{ .Get "primary_dark" }};
   padding: .6em 2.1em;
 }
@@ -597,11 +613,11 @@ a.hero-cta-alt:hover {
   transform: scale(1.1);
 }
 
-.hero-overlay .btn-lg {
+.wg-hero .btn-lg {
   font-size: 1.1rem;
 }
 
-.hero-overlay .hero-note {
+.wg-hero .hero-note {
   font-size: 0.8rem;
 }
 

layouts/partials/widget_page.html

@@ -13,14 +13,40 @@
 
 <!-- Widgets -->
 {{ range $index, $page := where (where .Data.Pages "Section" $section) ".Params.active" "!=" false }}
+  {{/* Begin widget styling */}}
+  {{ $bg := $page.Params.background }}
+  {{ $style := "" }}
+
+  {{ if $bg.color }}
+    {{ $style = printf "background-color: %s;" ($bg.color | default "transparent") }}
+  {{ end }}
+
+  {{ if and $bg.gradient_start $bg.gradient_end }}
+    {{ $style = printf "%sbackground-image: linear-gradient(%s, %s);" $style $bg.gradient_start $bg.gradient_end }}
+  {{ end }}
+
+  {{ if $bg.image }}
+    {{ $darken := "" }}
+    {{ if $bg.image_darken }}
+      {{ $darken = printf "linear-gradient(rgba(0, 0, 0, %s), rgba(0, 0, 0, %s))," (string $bg.image_darken) (string $bg.image_darken) }}
+    {{ 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) }}
+  {{ end }}
+
+  {{ with $page.Params.css_custom }}
+    {{ $style = print $style . }}
+  {{ end }}
+
   {{ $params := dict "root" $ "page" $page }}
-  {{ $widget := printf "widgets/%s.html" ( or $page.Params.widget "custom" ) }}
-  {{ if in (slice "hero" "hero_carousel") $page.Params.widget }}
-    {{ partial $widget $params }}
+  {{ $widget := or $page.Params.widget "custom" }}
+  {{ $widget_path := printf "widgets/%s.html" $widget }}
+  {{ if in (slice "slider") $widget }}
+    {{ partial $widget_path $params }}
   {{ else }}
-  <section id="{{ $page.File.TranslationBaseName }}" class="home-section{{ with $page.Params.css_class }} {{ . }}{{ end }}">
+  <section id="{{ $page.File.TranslationBaseName }}" class="home-section {{ printf "wg-%s" (replace $widget "_" "-") }} {{if $bg.text_color_light}}dark{{end}} {{if $bg.image}}parallax{{end}} {{ with $page.Params.css_class }}{{ . }}{{ end }}" {{with $style}}style="{{. | safeCSS}}"{{end}}>
     <div class="container">
-      {{ partial $widget $params }}
+      {{ partial $widget_path $params }}
     </div>
   </section>
   {{ end }}

layouts/partials/widgets/hero.html

@@ -1,86 +1,64 @@
 {{ $ := .root }}
 {{ $page := .page }}
-{{ $header := $page.Params.header }}
 
-{{/* See Hugo note on linking assets in styles: https://github.com/gohugoio/hugoThemes#common-permalink-issues */}}
-{{ $overlay_img := "" }}
-{{ if $header.overlay_img }}
-  {{ $overlay_img = printf "img/%s" $header.overlay_img | absURL }}
-{{end}}
-
-<section id="{{ $page.File.TranslationBaseName }}" class="hero-overlay" style="
-{{ if $header.overlay_color }}
-background-color: {{ $header.overlay_color | default "transparent" }};
-{{ end }}
-{{ if $header.overlay_img }}
-background-image:
-{{ if $header.overlay_filter }}linear-gradient(rgba(0, 0, 0, {{ $header.overlay_filter }}), rgba(0, 0, 0, {{ $header.overlay_filter }})), {{ end }}
-url('{{ $overlay_img }}')
+{{ if $page.Params.hero_media }}
+<div class="row">
+  <div class="col-md-6 order-md-1 text-center text-md-left">
 {{ end }}
-;">
-
-  <div class="container">
-    {{ if $page.Params.hero_media }}
-    <div class="row">
-      <div class="col-md-6 order-md-1 text-center text-md-left">
-    {{ end }}
-
-        <h1 class="hero-title" itemprop="headline">
-          {{ with $page.Title }}{{ . | markdownify }}{{ end }}
-        </h1>
 
-        {{ with $page.Content }}
-        <div class="hero-lead">{{ . }}</div>
-        {{ end }}
+    <h1 class="hero-title" itemprop="headline">
+      {{ with $page.Title }}{{ . | markdownify }}{{ end }}
+    </h1>
 
-        {{/* Call-to-action link */}}
-        {{ if $page.Params.cta.url }}
-          {{ $pack := or $page.Params.cta.icon_pack "fas" }}
-          {{ $pack_prefix := $pack }}
-          {{ if in (slice "fab" "fas" "far" "fal") $pack }}
-            {{ $pack_prefix = "fa" }}
-          {{ end }}
-          {{ $link := $page.Params.cta.url }}
-          {{ $scheme := (urls.Parse $link).Scheme }}
-          {{ $target := "" }}
-          {{ if not $scheme }}
-            {{ $link = $link | relLangURL }}
-          {{ else if in (slice "http" "https") $scheme }}
-            {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
-          {{ end }}
-        <p class="cta-btns">
-          <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} class="btn btn-light btn-lg">{{ if $page.Params.cta.icon }}<i class="{{ $pack }} {{ $pack_prefix }}-{{ $page.Params.cta.icon }}" aria-hidden="true"></i> {{end}}{{ $page.Params.cta.label | markdownify | emojify | safeHTML }}</a>
+    {{ with $page.Content }}
+    <div class="hero-lead">{{ . }}</div>
+    {{ end }}
 
-          {{/* Alternative Call-to-action link */}}
-          {{ if $page.Params.cta_alt.url }}
-            {{ $link := $page.Params.cta_alt.url }}
-            {{ $scheme := (urls.Parse $link).Scheme }}
-            {{ $target := "" }}
-            {{ if not $scheme }}
-              {{ $link = $link | relLangURL }}
-            {{ else if in (slice "http" "https") $scheme }}
-              {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
-            {{ end }}
-          <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} class="hero-cta-alt pl-4">{{ $page.Params.cta_alt.label | markdownify | emojify | safeHTML }} <i class="fas fa-angle-right"></i></a>
-          {{ end }}
-        </p>
-        {{ end }}
+    {{/* Call-to-action link */}}
+    {{ if $page.Params.cta.url }}
+      {{ $pack := or $page.Params.cta.icon_pack "fas" }}
+      {{ $pack_prefix := $pack }}
+      {{ if in (slice "fab" "fas" "far" "fal") $pack }}
+        {{ $pack_prefix = "fa" }}
+      {{ end }}
+      {{ $link := $page.Params.cta.url }}
+      {{ $scheme := (urls.Parse $link).Scheme }}
+      {{ $target := "" }}
+      {{ if not $scheme }}
+        {{ $link = $link | relLangURL }}
+      {{ else if in (slice "http" "https") $scheme }}
+        {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
+      {{ end }}
+    <p class="cta-btns">
+      <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} class="btn btn-light btn-lg">{{ if $page.Params.cta.icon }}<i class="{{ $pack }} {{ $pack_prefix }}-{{ $page.Params.cta.icon }}" aria-hidden="true"></i> {{end}}{{ $page.Params.cta.label | markdownify | emojify | safeHTML }}</a>
 
-        {{/* Call-to-action note */}}
-        {{ with $page.Params.cta_note }}
-        <p class="hero-note text-muted mb-0">
-          {{ .label | markdownify | emojify | safeHTML }}
-        </p>
+      {{/* Alternative Call-to-action link */}}
+      {{ if $page.Params.cta_alt.url }}
+        {{ $link := $page.Params.cta_alt.url }}
+        {{ $scheme := (urls.Parse $link).Scheme }}
+        {{ $target := "" }}
+        {{ if not $scheme }}
+          {{ $link = $link | relLangURL }}
+        {{ else if in (slice "http" "https") $scheme }}
+          {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
         {{ end }}
+      <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }} class="hero-cta-alt pl-4">{{ $page.Params.cta_alt.label | markdownify | emojify | safeHTML }} <i class="fas fa-angle-right"></i></a>
+      {{ end }}
+    </p>
+    {{ end }}
 
-      {{/* Hero image */}}
-      {{ if $page.Params.hero_media }}
-      </div>
-      <div class="col-6 mx-auto col-md-6 order-md-2 hero-media">
-        <img src="{{ printf "img/%s" $page.Params.hero_media | relURL }}" alt="">
-      </div>
-    </div>
+    {{/* Call-to-action note */}}
+    {{ with $page.Params.cta_note }}
+    <p class="hero-note text-muted mb-0">
+      {{ .label | markdownify | emojify | safeHTML }}
+    </p>
     {{ end }}
 
+  {{/* Hero image */}}
+  {{ if $page.Params.hero_media }}
   </div>
-</section>
+  <div class="col-6 mx-auto col-md-6 order-md-2 hero-media">
+    <img src="{{ printf "img/%s" $page.Params.hero_media | relURL }}" alt="">
+  </div>
+</div>
+{{ end }}

layouts/partials/widgets/hero_carousel.html → layouts/partials/widgets/slider.html

@@ -13,7 +13,7 @@
   <!-- Carousel slides wrapper -->
   <div class="carousel-inner" style="min-height: {{$page.Params.height | default "300px"}};">
     {{ range $index, $item := $page.Params.item }}
-    <div class="hero-overlay carousel-item{{ if eq $index 0 }} active{{ end }}" style="min-height: inherit;
+    <div class="wg-hero carousel-item{{ if eq $index 0 }} active{{ end }}" style="min-height: inherit;
       {{ if $item.overlay_color }}
       background-color: {{ $item.overlay_color | default "transparent" }};
       {{ end }}